如何使 React table 单元格组件通信？

Question

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

如屏幕截图所示，它有两列，一列带有输入字段，另一列是正常的 div 显示 text.I 想用列中输入的值更新列 2 的值1.

我被这个问题困住了，如何在 React 中完成？

谢谢

更新： 我的 table 组件的代码：

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

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

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

在第二列中，如果 overridden == true

，则显示 override 值

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" />
          );
}
};

如何使 React table 单元格组件通信？

How to make react table cell components communicate?

javascript

reactjs

react-table