我的要求是从商店获取数据并使用固定数据表填充它，并针对我需要放置编辑按钮的每一行。 单击编辑按钮后，我需要在更新字段后最终在具有可编辑选项的模式框中显示行数据，最后单击保存 模态框中的按钮需要在数据库中更新数据，固定数据表也需要更新。
到目前为止，我一直在使用固定数据表显示商店数据，每行都有可编辑的选项。 但是在更新数据库中的记录后，如果只更新固定数据表行而不刷新整个表，则坚持下去。
以下是我的代码，不知道这是否是正确的做法
var TestModal = React.createClass({
propTypes: {
title : React.PropTypes.any,
rank : React.PropTypes.any,
year : React.PropTypes.any
},
getInitialState: function() {
return {
title: this.props.title,
rank: this.props.rank,
year: this.props.year
};
},
handleSubmit: function(e) {
e.preventDefault();
var title = this.refs.title.getValue().trim().toUpperCase();
var rank = this.refs.rank.getValue().trim().toUpperCase();
var year = this.refs.year.getValue().trim().toUpperCase();
var title_json= JSON.stringify({title: title});
var rank_json= JSON.stringify({rank: rank});
var year_json= JSON.stringify({year: year});
//alert(title_json);
//alert(rank_json);
//alert(year_json);
this.props.onCommentSubmit(title_json,rank_json,year_json);
this.props.onRequestHide;
return;
},
validationTest: function() {
var length = this.state.test.length;
if (length > 10) return 'success';
else if (length > 5) return 'warning';
else if (length > 0) {
return 'error';
}
},
render: function() {
return (
<Modal {...this.props} className="testModal" bsStyle="primary" title='Edit Details' animation={false}>
<form className="testModal" onSubmit={this.handleSubmit} >
<div className="modal-body">
<p><Input type="text" defaultValue={this.state.title} ref="title" className="form-control" required/></p>
<p><Input type="text" defaultValue={this.state.rank} ref="rank" className="form-control" required/></p>
<p><Input type="text" defaultValue={this.state.year} ref="year" className="form-control" required/></p>
</div>
<div className="modal-footer">
<ButtonGroup>
<Button className="btn btn-default" onClick={this.props.onRequestHide} data-dismiss="modal" active>Close</Button>
<Button bsStyle="primary" className="btn btn-default" type="submit" disabled={this.state.isSubmitting}>Save</Button>
</ButtonGroup>
</div>
</form>
</Modal>
);
}
});
var Trigger = React.createClass({
propTypes: {
title : React.PropTypes.any,
rank : React.PropTypes.any,
year : React.PropTypes.any
},
handleCommentSubmit: function(title_json,rank_json,year_json) {
alert("handleCommentSubmit:"+title_json);
alert("handleCommentSubmit:"+rank_json);
alert("handleCommentSubmit:"+year_json);
//code to send updated fields to server and refresh the fixed data table row
},
render: function() {
return (
<ModalTrigger modal={<TestModal onCommentSubmit={this.handleCommentSubmit} title={this.props.title} rank={this.props.rank} year={this.props.year}/>} >
<Button bsStyle="primary" bsSize="medium">Edit</Button>
</ModalTrigger>
);
}
});
var usersList = React.createClass({
getInitialState() {
alert("DashboardComponent::getInitialState");
return {
rows: []
};
},
componentDidMount: function() {
alert("DashboardComponent::componentDidMount");
DashboardServerActionCreators.receiveData();
},
componentWillMount() {
alert("DashboardComponent::componentWillUnmount");
dashboardStore.addChangeListener(this._onChange);
},
componentWillUnmount: function () {
alert("DashboardComponent::componentWillUnmount");
dashboardStore.removeChangeListener(this._onChange);
},
_onChange: function() {
alert("DashboardComponent::onChange");
this.setState({
rows: dashboardStore.getUsersList()
});
},
_renderButton(cellData, cellDataKey, rowData, rowIndex){
var title=(JSON.stringify(rowData.title)).replace(/\"/g, "");
var rank=(JSON.stringify(rowData.rank)).replace(/\"/g, "");
var year=(JSON.stringify(rowData.year)).replace(/\"/g, "");
return <Trigger onCommentSubmit={this.handleCommentSubmit} title={title} rank={rank} year={year}/>
},
_rowGetter(rowIndex) {
return this.state.rows[rowIndex];
},
render() {
return (
<div>
<Table
height={500}
rowHeight={40}
rowGetter={this._rowGetter}
rowsCount={this.state.rows.length}
width={630}
maxHeight={450}
headerHeight={40}>
<Column
label="ID"
width={200}
dataKey="_id"
/>
<Column
label="Name"
width={150}
dataKey="title"
/>
<Column
label="Rank"
width={100}
dataKey="rank"
/>
<Column
label="Year"
width={80}
dataKey="year"
/>
<Column
label="Click"
width={80}
cellRenderer= {this._renderButton}
/>
</Table>
</div>
);
}
});
答案 0 :(得分：1)
我认为你不能避免重新渲染表格。但这是一个问题，React应该处理得很好。毕竟这看起来像React的做事方式和fixeddatatable'通过虚拟化你的单元格而只渲染视图中的东西'。
如果你不想重新调用所有数据，你可以只更新集合中该行的对象（fixeddatatable的数据），可能是在相关的Store和setState中的setState重新渲染，你的服务器应该只是为数据库更新发送成功或失败，或者当您离开视图时，您可以更新对数据库的任何编辑，获得通过失败，如果失败警报用户编辑失败，则可能更有效地执行此操作那样 ？
有兴趣听取其他人的意见。