如何在选项卡中验证多个react-jsonschema-form

时间:2019-01-02 17:22:04

标签: javascript reactjs react-jsonschema-forms

我对react-jsonschema-form还是相当陌生,我试图弄清楚如何通过单击父按钮来验证多个表单。现在,我有一个包含选项卡和提交按钮的父组件。每个选项卡都包含一个react-jsonschema-form。是否可以通过单击父提交按钮来使每个选项卡中的表单生效?当单击“提交”按钮时,我可以console.log选项卡的名称,但是当前未处于活动状态的表单会出现一个错误,提示:name =“''无效的表单控件无法聚焦。

例如,我有:

父项:

<Paper style={styles.well} >
   <Container style={styles.grid}>
      <Row>
         <Col xs={12} sm={12} md={8} lg={6} >
             <Form >
                 <Form.Group                                              controlId="name">
                 <Form.Label>Name *</Form.Label>
                 <Form.Control placeholder="Enter name" name='name' value={this.state.name} onChange={this.handleChange}/>
                 </Form.Group>

                 <Form.Group controlId="description">
                 <Form.Label>Description </Form.Label>
                 <Form.Control as='textarea' placeholder="Enter Description"= name='description' required value={this.state.description} onChange={this.handleChange} />
                 </Form.Group>
                 <Form.Group controlId="pay">
                 <Form.Label>Pay *</Form.Label>
                 <Form.Control as="select" placeholder="select" name='pay' value={this.state.pay} onChange={this.handleChange}> 

                 <option value="select"></option>                
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>
                 <option value="5">5</option> 
             </Form.Control>
             </Form.Group>
          </Form>
       </Col>

      {this.state.pay === '' ? <div></div> 
      : <TabContent onResetValidation={this.handleResetValidation} validateForms={this.state.validateForms} payType={this.state.pay}/>}
       <Container>
           <Row style={{paddingBottom:'15px', paddingTop:'10px'}}>
              <Col xs={12} sm={12} md={12} lg={12} >
                  {this.state.pay === '' ? <div></div> :
                  <Button onClick={this.submitForms} variant='primary' size='large'>Submit Form

                   </Button>
      }
      </Col>
    </Row>
 </Container>

标签内容组件:

<Container style={{paddingTop:'30px', width:'100%'}}>
   <Row>
      <Col xs={12} md={12} lg={12} >
          <Tabs id={'PayTabs'} defaultActiveKey={1} >
              <Tab eventKey={1} title="Tab 1">
                 <div style={{paddingTop:'20px'}}>
                   <Tab1 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms} payType={payType}/>
                 </div>
             </Tab>
             <Tab eventKey={2} title="Tab 2">
                 <div style={{paddingTop:'20px'}}>
                   <Tab2 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms}  payType={payType}/>
                 </div>
             </Tab>
             <Tab eventKey={3} title="Tab 3">
                 <div style={{paddingTop:'20px'}}>
                   <Tab3 onResetValidation={this.props.onResetValidation} validateForms={this.props.validateForms}  payType={payType}/>
                 </div>
             </Tab>
         </Tabs>                   
     </Col>
  </Row>

每个子标签页组件如下所示:

export class Tab1 extends Component {
constructor(props) {
    super(props);

    this.state = {            
    };
}
componentWillReceiveProps(nextProps, nextContent) {
    if (nextProps.validateForms !== this.state.validateForms) {
        if (nextProps.validateForms === true) {
            debugger
            console.log("Tab1");
            this.form.submitButton.click();
            this.props.onResetValidation();
        }
    }
}
render() { 
return (   
<Container style={{width: '100%', paddingBottom:'25px'}}>
    <Row>
       <Col xs={12} md={12} lg={12} style={{marginLeft:'-25px', marginTop:'-15px'}}>
           <MyForm name='form' ref={(form) => {this.form=form;}}/>
       </Col>
    </Row>
 </Container> 
 );
}

}

MyForm组件:

function Tpl(props) {
const {id, label, required, children} = props;
return (
    <div className="myfield">
        <label htmlFor={id}>{label}{required ? "*" : null}</label>
        {children}
    </div>
    );
}
class MyForm extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        formData: {}
    }
}

onSubmit(formData) {
    //this only gets called if the validation is successful
    console.log(formData);
}

onError(formData) {
    console.log(formData)
}


render () {
    return (
        <Form2  FieldTemplate={Tpl}  onError={this.onError} onChange={({ formData }) => this.setState({ formData })} formData={this.state.formData} schema={schema} onSubmit={this.onSubmit} className="component-container">
            <button ref={(btn) => {this.submitButton=btn;}} style={{"display": "none"}}/>
        </Form2>
    );
}

}

0 个答案:

没有答案