React-data-grid

Question

我正在尝试在我的 react-data-grid 中创建特定功能。

我有一个名为 subStart 的列，我有一个要使用的下拉列表，以便用户可以将单元格的值设置为状态变量的值 (this.state.timeTotalSec)。因此，如果用户单击 'Start Time' 单元格中的 "Use Global Time" 选项，它将用 this.state.timeTotalSec 的值替换该单元格的值。我到底该怎么做？

我可以使用下拉功能。但是如何让它改变单元格值呢？

const rows = [
  { id: 1, subStart: "00:00.000", subEnd: "00:00.000" , subText: 'Text1'},
  { id: 2, subStart: "00:00.000", subEnd: "00:00.000" , subText: 'Text2'},
  { id: 3, subStart: "00:00.000", subEnd: "00:00.000" , subText: 'Text3'}
];

const columns = [
  {
    key: "id",
    name: "ID"
  },
  {
    key: "subStart",
    name: "Start Time",
    editable: true
  },
  {
    key: "subEnd",
    name: "End Time",
    editable: true
  },
  {
    key: "subText",
    name: "Text",
    editable: true
  }
].map(c => ({ ...c, ...defaultColumnProperties }));

const subStartActions = [
  {
    icon: <span className="glyphicon glyphicon-remove" />,
    callback: () => {
      alert("Deleting");
    }
  },
  {
    icon: "glyphicon glyphicon-link",
    actions: [
      {
        text: "Use Global Time",
        callback: () => {
          // TODO
          // **** TRYING TO MAKE THIS WORK ****
        }
      }
    ]
  }
];

function getCellActions(column, row) {
  const cellActions = {
    subStart: subStartActions
  };
  return row.id % 2 === 0 ? cellActions[column.key] : null;
}

const ROW_COUNT = 50;

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      playing: false,
      duration: 0,
      timeMilli: 0,
      timeSec: 0,
      timeMin: 0,
      timeTotalSec: 0,
      rows
    }
  }

  onDuration = (duration) => {
    this.setState({ duration })
  }
  onProgress = (progress) => {
    if (this.state.duration == 0) {
      return
    }

    const timeTotalSec = progress.played * this.state.duration

    if (timeTotalSec !== this.state.timeTotalSec) {
      const timeMin = Math.floor(timeTotalSec / 60)
      const timeSec = Math.floor(timeTotalSec - (timeMin)*60)
      const timeMilli = (timeTotalSec - timeSec - timeMin*60).toFixed(3)

      this.setState({ timeTotalSec })
      this.setState({ timeMin })
      this.setState({ timeSec })
      this.setState({ timeMilli })
    }
  } 

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };


  render () {
    const { data } = this;


    return (
        <div className='player-wrapper'>
        <ReactPlayer
          url='https://www.youtube.com/watch?v=lhlZkqEag7E'
          className='react-player'
          playing={this.state.playing}
          onPlay={() => this.setState({ playing: true })}
          onPause={() => this.setState({ playing: false })}
          controls='True'
          onDuration={this.onDuration}
          onProgress={this.onProgress}
        />
        Video is currently: {this.state.playing ? 'playing' : 'paused'}
        <br />
        Duration: {Math.round(this.state.duration).toString() + ' seconds'}
        <br />
        Elapsed: {this.state.timeMin + 'min ' + this.state.timeSec + 'sec ' + 
                  this.state.timeMilli + 'ms'}

        <br />
        <button onClick={() => this.setState({ playing: true })}>Play</button>
        <button onClick={() => this.setState({ playing: false })}>Pause</button>

        <ButtonToolbar>
          <Button variant="primary" onClick={() => this.setState(this.state.playing ? false : true)}>Play/Pause</Button>
        </ButtonToolbar>

      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={ROW_COUNT}
        // minHeight={500}
        getCellActions={getCellActions}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}
      />

    </div>
    )
  }
}

Answer 1

ReactDataGrid 只会呈现您传递给它的数据，如果您想更改单元格的值，您应该更新来自数据源的行或说明您是 using.in 您的情况 rows

 this.state = {
      playing: false,
      duration: 0,
      timeMilli: 0,
      timeSec: 0,
      timeMin: 0,
      timeTotalSec: 10,
      rows // your datasourse
    };

我想，id 是你的数据 Key.Add updateRowDate 到处理你的状态变化的动作。

actions: [
      {
        text: "Use Global Time",
        callback: () => {
          // TODO
          // **** TRYING TO MAKE THIS WORK ****
          updateRowDate(row.id);
        }
      }
    ]

这里是应用程序组件updateRowDate

  updateRowDate = rowId => {
    this.setState(prv => ({
      rows: prv.rows.map(q => {
        if (q.id === rowId) return { ...q, subStart: this.state.timeTotalSec };
        return q;
      })
    }));

最后，您需要将 updateRowDate 传递给 getCellActions

<ReactDataGrid
          columns={columns}
          rowGetter={i => this.state.rows[i]}
          rowsCount={ROW_COUNT}
          // minHeight={500}
          getCellActions={(column, row) =>
            getCellActions(column, row, this.updateRowDate)
          }
          onGridRowsUpdated={this.onGridRowsUpdated}
          enableCellSelect={true}
        />

这里是temporary sandbox包含固定版本

React-data-grid - 使用全局变量更改单元格值

React-data-grid - Changing cell value using global variable upon

javascript

reactjs