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

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

我有一个名为subStart的列，并且我想使用一个下拉列表，以便用户可以将单元格的值设置为状态变量（this.state.timeTotalSec）的值。因此，如果用户单击“开始时间”单元格中的“使用全局时间”选项，它将用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>
    )
  }
}