javascript - 如何使反应表单元格组件进行通信?
问题描述
我的应用程序中有一个反应表:
如屏幕截图所示,它有两列,一列带有输入字段,另一列是显示文本的普通 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" />
);
}
}
;
解决方案
这是一种方法。这应该足以让你开始
- 在第一列的组件中添加一个
onChange
函数<input>
(我们称之为overrideValue
) - 从该函数中,更新适当索引处的
override
值。还要this.state.tabledata
设置一个新值overridden
true
在第二列中,显示
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" /> ); } };
推荐阅读
- docker - 是否可以“重置” Docker 容器的读/写层?
- python - 如何在python中将None分配给对象引用
- python - python - 区分图例中的 x 和 y 误差
- node.js - MongoDB insertMany BulkWriteError,避免捕获重复键并执行 then 功能
- python - 抛出异常:读取访问冲突。**bp** 为 0xFFFFFFFFFFFFFFFF
- jpa - JPA 实体管理器是线程本地的吗?
- javascript - 只有元组时如何将数据从 JSON 加载到 D3 图表
- ms-project - MS Project:如何使用 JavaScript 插件设置任务的日常实际工作?
- css - 如何将css设置为角度4中的交替行
- r - 如何与“参考日期”进行比较,然后在 R 中填充缺失的数据?