Question

我正在构建react-redux应用程序，我正在尝试执行以下操作。

将表单组件放入模态中。
从模态中解雇提交。
使其全部通用且动态。

这是我的模态（你可以看到里面的ObjectForm）：

       <Modal show={showAddObjectModal} onHide={:: this.close}>
            <Modal.Header>
                <Modal.Title>Add Object</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Grid>
                    <Row>
                        <Col>
                            <ObjectFrom formClass={currentClassName} formId={this.state.compId}/>
                        </Col>
                    </Row>
                </Grid>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={:: this.close}>Close</Button>
                <Button bsStyle='primary' onClick={:: this.submitForm}>Save changes</Button>
            </Modal.Footer>
        </Modal>

在模态中的表单组件中，我使用“formId”prop。表单组件处理提交操作，它可以从表单内部的按钮内部调用，也可以从父组件外部调用（这是为了UI / UX考虑），所以它看起来像这样：

form inside modal example

我的目标是为每个实例创建动态唯一表单ID（使用createUniqueId函数）。创建的每个表单都将保存在App存储中的表单数组中，其中包含唯一的Id和提交状态（true / false）。在调度提交操作时（从任何地方，父项，自己形成），提交状态将更改为true，并由表单组件进行检查。如果为true，表单将处理提交并将数据发布到服务器。

为了设置表单Id，表单检查父组件是否设置了formId（检查prop是否有值）。如果已设置，那么这是formId，如果不是表单生成自己的表单Id。

此函数检查父级是否通过prop“formId”发送formId：

addFormId(props){
    let formId = null;

    //check if formId was passed from parent using props
    if (!props.formId) {
        formId = GetUniqeComponentId();
    } else {
        formId = props.formId;
    }

    console.log('add form id',formId);
    //update the component's state
    this.setState({formId});

    let {dispatch}=this.props;
    if(formId!=null) dispatch(actions.setForm(formId));

}

我的问题是我不能从父模式设置formId，因为在创建它的时间部分，并且直到父生成唯一id，父formId prop的值为null，并且表单“认为”没有父表单Id值，因此它会生成自己的。

谢谢：）

读取动态组件道具（从父组件到子组件）

0 个答案: