ReduxForm внутри Modal

Question

Я использую ReactJS и хочу добавить reduxForm в modal. Для модального использования я использую библиотеку reactstrap, которая представляет бутстрап 4 для React. Для проверки формы я использую 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); 

Когда я нажимаю на кнопка отмены модальный близко он работает хорошо, но когда я нажимаю на кнопку ОК и поля не являются допустимыми сообщения об ошибках не показали в противном случае, когда поля действуют модально не исчезает.

Мой вопрос заключается в том, как объединить reduxForm и Modal вместе?

Спасибо, Майкл.

Answer 1

Взаимозаписывающее устройство вставляет свое модальное определение в нижней части обработанного 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 
    }); 
    ... 
}