私の要件は、ストアからデータを取得し、固定データ テーブルを使用してデータを入力し、各行に対して編集ボタンを配置する必要があることです。編集ボタンをクリックした後、フィールドを更新した後、編集可能なオプションでモーダルボックスに行データを表示し、最後にモーダルボックスの保存ボタンをクリックして、データベースでデータを更新する必要があり、固定データテーブルも必要です更新も。
これまで、行ごとに編集可能なオプションを備えた固定データ テーブルを使用して店舗データを表示する作業を行ってきました。しかし、データベースのレコードを更新した後、テーブル全体を更新せずに固定データテーブルの行のみを更新する方法に行き詰まりました。
以下は私のコードであり、それが正しい方法であるかどうかわかりません
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>
);
}
});