Ich habe eine ReactJS-Anwendung, ich habe eine Seite, die eine Tabelle hat, gibt es eine Schaltfläche zum Erstellen eines neuen Datensatzes, der ein Modal öffnet, um die Daten einzugeben. Das funktioniert gut, aber ich möchte dasselbe Modal wiederverwenden, um die Daten ebenfalls zu bearbeiten. Der Benutzer kann eine Zeile auswählen und dann auf Bearbeiten klicken, aber die Daten, die ich benötige, scheinen nicht in der Lage zu sein.ReactJS Reuse Modal für Hinzufügen und Bearbeiten
Mein Dialog wird auf der Seite wie folgt eingefügt.
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>
)
}
In der Dialogkomponente I ruft mich versuchen, die Daten in componentDidMount Problem zu holen ist es immer null sein wird, wenn die Komponentenhalterungen, weil Benutzer noch nichts entschieden.
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();
}
}
Die modale offene Eigenschaft wird an Eltern gebunden, aber was ich brauche, um wirklich passieren, wenn sie geöffnet Änderungen den selectedParameter Wert überprüft und macht dann die Entscheidung, die API oder nicht zu nennen.
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>
.........
Allerdings scheint dies im Gegensatz zu sein, wie ReactJS will, das einzige, was arbeiten, ich denken kann, ist den ganzen Staat in die übergeordnete Komponente zu bewegen, aber das wird es riesig machen und wirklich scheint nicht wie gutes Moduldesign.
Gibt es einen anderen Weg, dies zu erreichen? Wenn ich eine Kind-Funktion von Eltern anrufen könnte, die erreichen würde, was ich tun muss, denke ich.