Question

我使用ReactJS并希望将reduxForm添加到modal。对于模态，我使用代表React的bootstrap 4的reactstrap库。对于表单验证，我使用reduxForm

我的任务是使用验证字段添加表单模式，我这样做了：

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

最后我导出了Component：

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

当我点击取消按钮时，模态关闭效果很好，但是当我点击确定按钮时并且当字段有效时，字段不是有效的错误消息，否则模式不会消失。

我的问题是如何将reduxForm和Modal结合起来？

谢谢，迈克尔。

Answer 1

reactstrap会在渲染的html文档的底部插入您的模态定义，因此<Form>周围的<Modal>不能正常工作。你必须拥有自己的内心。在你的情况下，因为你正在做一个提交动作，你会希望它包裹你的页脚和身体标签。

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

另外，您是否在构造函数中将切换绑定到此？

constructor(props) {
  this.toggle = this.toggle.bind(this);
}

或者，使用箭头功能。

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

模态内的ReduxForm

1 个答案: