我的要求是从存储中获取数据并使用固定数据表填充它，并且我需要针对每一行放置一个编辑按钮。单击编辑按钮后，我需要在更新字段后在具有可编辑选项的模式框中显示行数据，最后单击模式框中的保存按钮，数据需要在数据库中更新，固定数据表也需要也更新。
到目前为止，我一直在使用固定数据表显示商店数据，每行都有可编辑选项。但是在更新数据库中的记录后卡住了如何只更新固定数据表行而不刷新整个表。
下面是我的代码，不知道这是否是正确的做法
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>
);
}
});