我实现了使用自定义单元格类型的固定数据表。
我的文本单元格可以编辑,它们包含仅包含值属性的状态。
然后,我有 onBlur 事件,该事件在输入失去焦点并更新表状态的数据后触发。所有这些都工作正常。
预期行为/当前行为
但是,当我的数据从分页或排序事件更改时,我的 Cell 不会使用新值更新状态,因为我在构造函数上设置状态并且它只运行一次。
重现步骤(针对错误(
var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;
var Cell = FixedDataTable.Cell;
//Custom header cell
var MyHeaderCell = React.createClass({
mixins: [React.addons.PureRenderMixin],
render: function() {
return <Cell {...this.props}>Column: {this.props.columnKey}</Cell>;
}
})
//Custom cell
var MyCell = React.createClass({
mixins: [React.addons.PureRenderMixin],
getInitialState: function() {
return {
value: this.props.data[this.props.rowIndex][this.props.columnKey]
};
},
render: function() {
return <Cell {...this.props}>Cell: {this.state.value}</Cell>;
}
})
var MyTable = React.createClass({
mixins: [React.addons.PureRenderMixin],
render: function() {
var width = this.props.width;
var height = this.props.height;
var data = this.props.data;
return (
<Table
rowHeight={50}
rowsCount={data.length}
width={width}
height={height}
headerHeight={50}
>
{this.createColumns()}
</Table>
);
},
createColumns: function() {
var width = this.props.width;
var data = this.props.data;
var columnCount = data[0].length;
var columns = [];
for (let i = 0; i < columnCount; i++) {
columns.push(
<Column
key={i}
columnKey={i}
header={<MyHeaderCell />}
cell={<MyCell data={data} />}
width={width / columnCount}
/>
)
}
return columns;
}
})
var container = document.getElementById('container');
// Table data as a list of array.
var myData = [
['a1', 'b1', 'c1'],
['a2', 'b2', 'c2'],
['a3', 'b3', 'c3'],
// .... and more
];
function changeData() {
var temp = myData.slice();
debugger;
var iR = 0;
var newData = [
['x1', 'k1', 'w1'],
['x2', 'k2', 'w2'],
['x3', 'k3', 'w3'],
// .... and more
];
myData = newData;
render();
}
// Render your table
function render() {
var height = container.offsetHeight;
var width = container.offsetWidth;
ReactDOM.render(<div><button onClick={changeData}>Change Data</button><MyTable height={height} width={width} data={myData} /></div>,
document.getElementById('container'));
}
window.onresize = render;
render();
JSFiddle
单击"更改数据",则没有任何反应,但如果更改以下代码:
{this.state.value}
自
this.props.data[this.props.rowIndex][this.props.columnKey]
它有效。
如何重新生成 Cell,以便 State 通过构造函数获取新值?
您面临的问题是由于组件已挂载,状态已更改,但随后状态再也不会更改。添加componentWillReceiveProps
以在传递新 props 时更新状态将解决您的问题。
这里的小提琴
var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;
var Cell = FixedDataTable.Cell;
//Custom header cell
var MyHeaderCell = React.createClass({
mixins: [React.addons.PureRenderMixin],
render: function() {
return <Cell {...this.props}>Column: {this.props.columnKey}</Cell>;
}
})
//Custom cell
var MyCell = React.createClass({
mixins: [React.addons.PureRenderMixin],
getInitialState: function() {
return {
value: this.props.data[this.props.rowIndex][this.props.columnKey]
};
},
componentWillReceiveProps(nextProps){
this.setState({ value: nextProps.data[nextProps.rowIndex][nextProps.columnKey]});
},
render: function() {
return <Cell {...this.props}>Cell: {this.state.value}</Cell>;
}
})
var MyTable = React.createClass({
mixins: [React.addons.PureRenderMixin],
render: function() {
return (
<Table
rowHeight={50}
rowsCount={this.props.data.length}
width={this.props.width}
height={this.props.height}
headerHeight={50}
>
{this.createColumns()}
</Table>
);
},
createColumns: function() {
var columns = [];
for (let i = 0; i < this.props.data[0].length; i++) {
columns.push(
<Column
key={i}
columnKey={i}
rowIndex={this.props.data[0]}
header={<MyHeaderCell />}
cell={<MyCell data={this.props.data} />}
width={this.props.width / this.props.data[0].length}
/>
)
}
return columns;
}
})
var Container = React.createClass({
getInitialState: function() {
return {
iR: [
['a1', 'b1', 'c1'],
['a2', 'b2', 'c2'],
['a3', 'b3', 'c3'],
]
};
},
changeData: function() {
var newiR = [
['x1', 'k1', 'w1'],
['x2', 'k2', 'w2'],
['x3', 'k3', 'w3'],
];
this.setState({ iR: newiR });
},
render: function() {
return (
<div>
<button onClick={this.changeData}>Change Data</button>
<MyTable height={this.props.height} width={this.props.width} data={this.state.iR} />
</div>
);
}
})
var container = document.getElementById('container');
// Render your table
function render() {
var height = container.offsetHeight;
var width = container.offsetWidth;
ReactDOM.render(<Container height={height} width={width}/>,
document.getElementById('container'));
}
window.onresize = render;
render();
我移动了一些代码只是为了使其与 React 保持一致。
我强烈建议你看看 React 组件循环寿命