我对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>
);
}
}