Reactjs ReduxForm内模态

我使用ReactJS并希望将reduxForm添加到modal。 对于modal，我使用表示React引导4的库。 对于表单验证，我使用

我已为“添加表单模式”分配了验证字段的任务，我做到了：

  render() {
    const {handleSubmit, fields: {
            email
        }} = this.props;

    const FormEmail = ({touched, error}) => {
        if (touched && error)
            return (
                <div>
                    <Input type="email" name="email" id="email"/>
                    <div className="error">{error}</div>
                </div>
            );
        return (<Input type="email" name="email" id="email"/>);
    }
    return (
        <div>
            <Col>
                <Col xs={{
                    size: 9
                }}>
                    <ReportSettings/>
                </Col>
                <Col xs={{
                    size: 3
                }}>
                    <Button outline color="primary" onClick={this.toggle}>Share</Button>
                </Col>
            </Col>
            <Form onSubmit={handleSubmit(this.toggle)}>
                <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                    <ModalHeader toggle={this.toggle}>Share</ModalHeader>
                    <ModalBody>
                        <FormGroup row>
                            <CheckBoxInputField data={this.state.measurements} handleFieldChange={this.handleFieldChange}/>
                        </FormGroup>
                        <FormGroup row>
                            <Label for="email" xs={2}>Email</Label>
                            <Col xs={10}>
                                <FormEmail {...email}/>
                            </Col>
                        </FormGroup>
                        <FormGroup row>
                            <Label for="message" xs={2}>Message</Label>
                            <Col xs={10}>
                                <Input type="textarea" name="message" id="message"/>
                            </Col>
                        </FormGroup>

                    </ModalBody>
                    <ModalFooter>
                        <Button action="submit" color="primary" value={true}>OK</Button>
                        <Button color="secondary" onClick={this.toggle} value={false}>Cancel</Button>
                    </ModalFooter>
                </Modal>
            </Form>
        </div>
    );
}

验证功能：

toggle(e) {
        e.preventDefault();
        this.setState({
            modal: !this.state.modal
        });
        if (e.target.value === 'true') {
            const measurementsID = this.state.measurements.values.filter((measurement) => {
                return measurement.checked;
            }).map((measurement) => {
                return measurement.value;
            });

            this.props.onShare(MeasurementsToBitMap(measurementsID));
        }
    }

function validate(formProps) {
    const errors = {};

    if (!formProps.email) {
        errors.email = 'Please enter an email';
    }
    return errors;
}

最后，我导出组件：

export default reduxForm({form: 'form', fields: ['email'], validate})(HeadMeasurement);

当我点击取消按钮时，模式关闭工作正常，但当我点击确定按钮时 字段无效时，不会显示错误消息，否则当字段有效时，模式不会消失

我的问题是如何结合reduxForm和Modal工作

---

谢谢，Michael。

reactstrap在呈现的html文档底部插入模态定义，因此围绕

包装

是不起作用的。你必须有你的内心世界。在您的情况下，因为您正在执行提交操作，所以您希望将其包装在页脚和正文标记周围

           <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                <Form onSubmit={handleSubmit(this.toggle)}>
                    <ModalHeader toggle={this.toggle}>Share</ModalHeader>
                    <ModalBody>
                        <FormGroup row>
                            <CheckBoxInputField data={this.state.measurements} handleFieldChange={this.handleFieldChange}/>
                        </FormGroup>
                        <FormGroup row>
                            <Label for="email" xs={2}>Email</Label>
                            <Col xs={10}>
                                <FormEmail {...email}/>
                            </Col>
                        </FormGroup>
                        <FormGroup row>
                            <Label for="message" xs={2}>Message</Label>
                            <Col xs={10}>
                                <Input type="textarea" name="message" id="message"/>
                            </Col>
                        </FormGroup>

                    </ModalBody>
                    <ModalFooter>
                        <Button action="submit" color="primary" value={true}>OK</Button>
                        <Button color="secondary" onClick={this.toggle} value={false}>Cancel</Button>
                    </ModalFooter>
                </Form>
            </Modal>

或者，使用箭头函数

toggle = (e) => {
  e.preventDefault();
  this.setState({
    modal: !this.state.modal
  });
  ...
}

---

您使用的是什么版本的reactstrap和redux表单？“redux表单”：“^5.0.1”，“reactstrap”：“^3.2.2”，“react”：“^15.3.1”，一旦表单被删除，如何销毁它submitted@Nidhinkumar我想你在找

destroyOnUnmount:true

toggle = (e) => {
  e.preventDefault();
  this.setState({
    modal: !this.state.modal
  });
  ...
}