Modal中的ReduxForm

Question

我使用ReactJS并且想要将reduxForm添加到模态中。 对于模态，我使用reactstrap库来表示React的bootstrap 4。 对于表单验证我用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; 
} 

终于我出口组件：

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

当我点击取消按钮模态接近它的作品不错，但是当我点击OK按钮 和领域是无效的错误消息未显示否则，当字段有效模式没有消失。

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

谢谢，迈克尔。

Answer 1

reactstrap在呈现的html文档的底部插入您的模态定义，因此在<Modal>周围环绕<Form>不起作用。你必须有你的内心。在你的情况下，因为你正在做一个提交动作，你会希望它包裹你的页脚和body标签。

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