Реагировать JS подтвердить форму

Question

Привет, друзья! Я довольно новичок в React JS, поэтому я хочу спросить вас:

У меня есть компонент Parent и Child. В дочернем компоненте у меня есть входные данные (имя, адрес электронной почты и т. Д. c), а в родительском компоненте у меня есть кнопка для сохранения входных данных в базе данных.

Мой вопрос: как проверить входные данные (я хочу, чтобы они были необходимо), поэтому кнопка НЕ ​​может вызывать функцию 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 в родительском компоненте, вы можете иметь состояние disable, которое передается вашему компоненту Button, и вам нужно установить это состояние disable, когда onInputChange называется то есть

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