Реакция Отправить дочерние входные данные для обновления родительского состояния

Question

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

Ожидаемое поведение: У ребенка у меня есть поле ввода, и я хочу, чтобы состояние изменилось на значение, которое я отправляю в поле ввода при нажатии кнопки отправки. Я настроил родителя и ребенка следующим образом:

Что я пробовал: Я прохожу этот ответ и этот YouTube видео но я думаю, что я недостаточно умен, чтобы понять это.

Вот так выглядит мой код Родитель:

class App extends Component {
  state = { 
    value:"someValue"
   };

   changeValue = (value) => {
     this.setState({
       value
     })    
   }

  render() {
    return (
      <div>
        <p>this is the value from state: {this.state.value}</p>
        <button onClick={()=>this.changeValue("valueFromParentComponent")}>Press to change value from parent component</button>
        <br/><br/>
        <Child getChildInputOnSubmit={()=>this.changeValue()} />
      </div>      
    );
  }
}

А это то, что ребенок выглядит как

ребенок:

class Child extends Component {
    state = {

    }
    sendChildData = (childInputValue) => {
        console.group("This is the data from the input of the child component")
        console.log("==============")
        console.log(childInputValue)
        console.log("==============")
    }


    render() {
        return (
            <div>
                This is the child component
            <br /><br />
                <form>
                    <input type="text" placeholder="Some placeholder"></input>
                    <button onSubmit={this.sendChildData()} type="submit">Send child's input to parent</button>
                </form>

            </div>);

    }
}

Answer 1

Поведение React поощряет реализацию обратного потока данных внутри иерархии компонентов. Это означает, что дочерние компоненты могут получать родительские методы через реквизиты, эти методы будут работать как обратные вызовы, позволяя получать данные, запускать поведение, обновлять его состояние и т. Д.

Я прилагаю пример StackBlitz, показывающий, как эта концепция будет работа в вашей настройке https://stackblitz.com/edit/react-jsv5jo

Редактировать : Вот несколько дополнительных советов, примененных к примеру:

• К Для работы со входами в React общая настройка заключается в прослушивании события onChange для получения новых данных и обновления состояния компонента. Затем это состояние используется в атрибуте value для обновления входного содержимого в DOM.

• Прослушивание события onSubmit в теге form вместо кнопки подтверждения и не забудьте добавить некоторые логи c, чтобы избежать перезагрузки.

• Еще одна полезная практика для компонентов React - инициализация вашего объекта state внутри Конструктора (в случае работы с компонентом класса). ) и напишите методы, чтобы избежать раздувания render (обязательно связывайте дополнительные методы в конструкторе, чтобы избежать проблем с вызовом)

Answer 2

Обратные вызовы используются для передачи данных из дочернего компонента в родительский компонент в React. Мы запишем функцию в родительском компоненте, которая получит значение и передаст эту функцию дочернему компоненту через Props.

  class Parent extends Component {
  state = {
    value: 'someValue'
  };
  changeValue = value => {
    this.setState({
      value
    });
  };
  render() {
    return (
      <div>
        <p>this is the value from state: {this.state.value}</p>
        <button onClick={() => this.changeValue('valueFromParentComponent')}>
          Press to change value from parent component
        </button>
        <br></br>
        <Child getChildInputOnSubmit={this.changeValue} />
      </div>
    );
  }
}

Теперь в дочернем компоненте мы вызываем функцию Parents, которую мы передали в props, и отправляем значение.

  class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Childvalue: ''
    };
  }
  handleChange = event => {
    event.preventDefault();
    this.setState({ Childvalue: event.target.value });
  };
  sendToParent = () => {
    //here calling Parents changeValue
    this.props.getChildInputOnSubmit(this.state.Childvalue);
  };
  render() {
    return (
      <div>
        This is the child Component
        <br></br>
        <form action='#' onSubmit={this.sendToParent}>
          <input
            type='text'
            placeholder='Some placeholder'
            value={this.state.Childvalue}
            onChange={this.handleChange}
          ></input>
          <button type='submit'>Send child's input to parent</button>
        </form>
      </div>
    );
  }
}