javascript - 如何使反应表单元格组件进行通信？

Question

我的应用程序中有一个反应表：

如屏幕截图所示，它有两列，一列带有输入字段，另一列是显示文本的普通 div。我想用在第 1 列中输入的值更新第 2 列的值。

我被这个困住了，这怎么能在 React 中完成？

谢谢

更新： 我的表格组件的代码：

export default class customTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tableLoading: true,
            tabledata: [{override:80,final:90},{override:180,final:190}],
            tablelength: 0
        };
    }

    render() {

        const columns = [ {
            Header: props => <span>Override Value</span>,
            accessor: 'override',
            Cell: props => <input type="number"/>
        },
            {
                Header: 'Final',
                accessor: 'final'
            }];

        return (
                <ReactTable data={ this.state.tabledata } loading={ this.state.tableLoading } columns={ columns } defaultPageSize={ 12 } filterable={ true }
                  showPagination={ false } className="-striped -highlight fontsize-12" />
              );
    }
}
;

Answer 1

这是一种方法。这应该足以让你开始

• 在第一列的组件中添加一个onChange函数<input>（我们称之为overrideValue）
• 从该函数中，更新适当索引处的override值。还要this.state.tabledata设置一个新值overriddentrue

• 在第二列中，显示override值，如果overridden == true

  class customTable extends React.Component {
  constructor(props) {
      super(props);
  
      this.state = {
          tableLoading: true,
          tabledata: [{override:80,final:90},{override:180,final:190}],
          tablelength: 0
      };
  }
  
  overrideValue = (index, override) => {
      let tabledata = [...this.state.tabledata]
      tabledata[index].override = override
      tabledata[index].overridden = true
      this.setState({ tabledata })
  }
  
  render() {
  
      const columns = [ 
          {
              Header: props => <span>Override Value</span>,
              accessor: 'override',
              Cell: props => <input onChange={e => this.overrideValue(props.index, e.target.value)} type="number"/>
          },
          {
              Header: 'Final',
              accessor: 'final',
              Cell: props => (props.original.overridden) ? props.original.override : props.original.final
          }
      ];
  
      return (
              <ReactTable data={ this.state.tabledata } loading={ this.state.tableLoading } columns={ columns } defaultPageSize={ 12 } filterable={ true }
                showPagination={ false } className="-striped -highlight fontsize-12" />
            );
  }
  };