Как установить состояние в onChange, когда вы передаете реквизиты дочернему компоненту?

Question

У меня проблемы с назначением состояния в моей функции onChange, когда я передаю реквизиты дочернему компоненту. У меня есть форма, которая, когда пользователь отправляет его, должна обновить состояние.

Раньше я устанавливал состояние, но без передачи реквизитов, поскольку он был в том же файле, но теперь, когда я использую реквизиты в функции, я не уверен, как бы я устанавливал состояние.

const Child = props => {
return (
<div className='form'>
    <Form >
        <Form.Row>
            <Col>
                <Form.Control 
                name="studentName" 
                value={props.studentName} 
                placeholder="Student name" 
                onChange={this.change}  
                />
            </Col>
            <Col>
                <Form.Control 
                name="studentId" 
                value={props.studentId} 
                placeholder="StudentID" 
                onChange={e => this.change(e)}
                />
            </Col>
        </Form.Row>
    </Form>
</div>
)}

Answer 1

Вам необходимо передать callback function вашему дочернему компоненту как prop.

props.onChange

А затем в вашем родительском компоненте обработайте состояние, используя setState.

Проверьте это для получения дополнительной информации: https://reactjs.org/docs/faq-functions.html

Вот вам пример:

const Child = props => {
  return (
    <form onSubmit={props.onSubmit}>
      <input
        type="text"
        name="studentName"
        value={props.studentName}
        placeholder="Student name"
        onChange={props.onChange}
      />
      <button type="submit">submit</button>
    </form>
  );
};

class Parent extends React.Component {
  state = {
    data: ""
  };
  handleChange = e => {
    this.setState({
      data: e.target.value
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state.data);
  };
  render() {
    return (
      <div>
        <Child onSubmit={this.handleSubmit} onChange={this.handleChange} />
        <p>{`state: ${JSON.stringify(this.state.data)}`}</p>
      </div>
    );
  }
}

Если вы хотите, чтобы Child обрабатывал свое собственное состояние, то вы либо используете React-хуки и добавляете состояние в компонент функции (см. useState или useReducer хуки https://reactjs.org/docs/hooks-reference.html#usestate,, либо делаете его компонентом класса .