React JS验证表单

Question

朋友们，你好，我对React JS很陌生，所以我想问你这个问题：

我有一个父子组件。在子组件中，我有输入(姓名、电子邮件等(，在父组件中，有按钮将输入数据保存在数据库中。

我的问题是：如何验证输入(我希望它们是必需的(，这样如果输入为空，按钮就不能调用saveData函数(保存在数据库中(。

这是父组件：

class Parent extends Component{
saveData = (e) => {
//some code
}
render() {
return (
<div>
<Child/>
<Button color="primary" onClick={this.saveData}>Submit</Button>
</div>
);
}
}

这是子组件：

class Child extends React.Component {
onInputChange = (e) => {
e.preventDefault();
this.props.onInputChange(e.target.name, e.target.value);
};
render() {
return (
<FormGroup>
<Input name="email" onChange={this.onInputChange}/>
</FormGroup>
);
}
}

Answer 1

我看不到您的onInputChange函数的实现，但看起来它来自父组件。

因此，如果父组件中有onInputChange，则可以有一个传递给Button组件的disable状态，并且在调用onInputChange时需要设置该disable状态，即

onInputChange = (name, value) => {
if(value === ''){
this.setState({disable: true});
}
else{
this.setState({
name: value;
disable:false
})
}
}

并将其传递给您的按钮，即

<Child />
<Button color="primary" disabled={disable} onClick={this.saveData}>