Modula内のReduxForm

Question

私はReactJSを使用しており、reduxFormをモーダルに追加したいと考えています。 モーダルについては、Reactのブートストラップ4を表すreactstrapライブラリを使用します。

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

私は、検証フィールドに追加フォームをモーダルに任されていると私はことをやった reduxForm

を使用してフォームの検証のために

最後にエクスポートコンポーネント：

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

私はをクリック近いモーダルはそれが良い動作しますが、私は[OK]ボタンをクリックしたとき とフィールドはフィールドが有効なモーダルあるときに有効なエラーメッセージがそれ以外を示していないではありませんボタンをキャンセル消えていない。

私の質問は、どのように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 
    }); 
    ... 
}