React JS 验证表单答案

【问题标题】：React JS validate formReact JS 验证表单
【发布时间】：2020-07-07 05:41:50
【问题描述】：

朋友们好，我是 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>

        );
    }
}

【问题讨论】：

这里似乎缺少很多东西。 (1) 您引用了一个未在父组件中为子组件设置的道具 onInputChange (2) 父或子中没有状态来跟踪输入值 (3) 没有实现任何函数代表你的 onInputChange 道具功能
是的，我刚刚发布了我认为对向您展示我想要做什么很重要的那部分代码，我不想用很多代码来打扰您（当然有这里有很多遗漏的东西）

标签： javascript reactjs validation

【解决方案1】：

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

因此，如果您的父组件中有onInputChange，那么您可以将disable 状态传递给您的Button 组件，并且您需要在调用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}>

【讨论】：