1
私はReactJSアプリケーションを持っています。テーブルを持つページがあり、データを入力するためのモーダルを開く新しいレコードを作成するための作成ボタンがあります。それはうまく動作しますが、データを編集するために同じモーダルを再利用したいと思います。ユーザーは行を選択して[編集]をクリックできますが、必要なデータを取得できないようです。ReactJS Reuse Modal for Add and Edit
私のダイアログは次のようにページに含まれています。私は、ユーザーがまだ何も選択していませんので、それは常にときに、コンポーネントマウントnullになりますされてcomponentDidMountの問題でデータをフェッチしようとして呼び出しています]ダイアログコンポーネントで
render() {
return (
<div>
<h2>Parameters</h2>
<div className="row">
<ParameterDialog callback={this.fetchFromApi} messageCallback={this.props.messageCallback} open={this.state.modalOpen} openCallback={this.openModal} closeCallback={this.closeModal} selectedParameter={this.state.selectedRow} selectedParameterCallback={this.getSelectedParameter} />
<div className="col-sm-10">
<button type="button" onClick={this.onDelete} className="btn btn-danger pull-right" style={{marginRight: '15px', width: '80px'}}><span className="glyphicon glyphicon-remove"></span> Delete</button>
<button type="button" onClick={this.onEdit} className="btn btn-warning pull-right" style={{marginRight: '15px', width: '80px'}}><span className="glyphicon glyphicon-edit"></span> Edit</button>
</div>
</div>
<BootstrapTable data={this.state.parameters} options={options} pagination selectRow={{mode: 'radio', onSelect: this.onRowSelect}}>
<TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
<TableHeaderColumn dataField='groupId' filterFormatted dataFormat={enumFormatter} formatExtraData={this.props.parentState.parameterGroups}
filter={{type: 'SelectFilter', options: this.props.parentState.parameterGroups}}>Category</TableHeaderColumn>
<TableHeaderColumn dataField='subGroupId' filterFormatted dataFormat={enumFormatter} formatExtraData={this.state.subGroups}
filter={{type: 'SelectFilter', options: this.state.subGroups}}>Sub Category</TableHeaderColumn>
<TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 500 } }>Parameter</TableHeaderColumn>
<TableHeaderColumn dataField='type' filterFormatted dataFormat={enumFormatter} formatExtraData={this.props.parentState.parameterTypes}
filter={{type: 'SelectFilter', options: this.props.parentState.parameterTypes}}>Type</TableHeaderColumn>
<TableHeaderColumn dataField='reboot'>Reboot</TableHeaderColumn>
</BootstrapTable>
</div>
)
}
。
componentDidMount() {
console.debug("ParameterDialog mounted...");
axios({
method: 'get',
url: urlBuilder.buildUrl('/api/groups'),
data: {},
}).then(resp => {
this.setState({groups: resp.data});
}).catch(error => {
this.props.messageCallback("Ohhhh snap!", "Unable to fetch data from server", Constants.MESSAGE_ERROR)
});
axios({
method: 'get',
url: urlBuilder.buildUrl(`/api/groups/2/subgroups`),
data: {}
}).then(resp => {
this.setState({subGroups: resp.data});
}).catch(error => {
this.props.messageCallback("Ohhhh snap!", "Unable to fetch data from server", Constants.MESSAGE_ERROR)
});
// init the state
this.setState({typeOptions: ['BOOLEAN', 'STRING', 'INTEGER', 'DECIMAL']});
this.setState({selectedGroup: 2, parameter: '', description: null, type: 'BOOLEAN', rebootRequired: false});
// if parameterId is present load record from database (Edit mode)
let parameterId = this.props.selectedParameterCallback();
if (parameterId) {
console.debug("Parameter is being edited, loading record");
this.editMode = true;
this.loadRecord();
}
}
モーダルオープンプロパティは、親に結合したが、オープンの変更は、それがselectedParameter値を確認してからAPIかどうかを呼び出すための決定をする際にどのような私は本当に起こる必要があることですされています。
return (
<div className="col-sm-2">
<Button bsStyle="primary" onClick={this.props.openCallback}>Add Parameter</Button>
<Modal show={this.props.open} onHide={this.closeCallback}>
<Modal.Header>
<Modal.Title>Add/Edit Parameter</Modal.Title>
</Modal.Header>
.........
しかし、これはReactJSが動作するように望んでいる方法とは対照的であると思われる、私は考えることができる唯一のことは、親コンポーネントにすべての状態を移動することですが、それはそれは巨大になりますし、本当にいないようです良いモジュールデザインのように。
これを達成する別の方法はありますか？私がする必要があることを達成する親から子の機能を呼び出すことができると思う。