Javascript 用于添加和编辑的ReactJS重用模式

我有一个ReactJS应用程序，我有一个页面，其中有一个表，有一个创建按钮，用于创建一个新记录，打开一个模式来输入数据。这很好，但我想重用相同的模式来编辑数据。用户可以选择一行，然后单击“编辑”，但我似乎无法获得所需的数据

我的对话框包含在页面上，如下所示

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>
        )
    }

模态open属性正在绑定到父级，但我真正需要做的是，当open更改时，它检查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希望的工作方式相反，我唯一能想到的是将所有状态移动到父组件中，但这将使其变得巨大，并且看起来不像是好的模块设计

---

有没有其他方法可以实现这一点？如果我可以从父级调用一个子函数来完成我需要做的事情，我想。

React最适合只管理视图，而不是视图背后的操作

我强烈建议使用Redux来帮助实现这一点。使用Redux，您可以在action creator中调用AJAX，并在reducer中维护您的应用程序状态。这将大大简化您的React，并使其更易于维护

---

关于您关于在何处维护状态的问题，您将使用reducer将其保持在Redux状态，并且所有状态更改将作为道具传播到React组件。您希望采用自上而下的层次结构设计，以便父组件（对话框的父组件）将对话框内容作为道具传递给对话框。对话框将向动作创建者发送事件以进行加载和更新。

React最适合只管理视图，而不是视图后面的动作

我强烈建议使用Redux来帮助实现这一点。使用Redux，您可以在action creator中调用AJAX，并在reducer中维护您的应用程序状态。这将大大简化您的React，并使其更易于维护

关于您关于在何处维护状态的问题，您将使用reducer将其保持在Redux状态，并且所有状态更改将作为道具传播到React组件。您希望采用自上而下的层次结构设计，以便父组件（对话框的父组件）将对话框内容作为道具传递给对话框。对话框将向动作创建者发送事件以进行加载和更新

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>
                .........