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