Блог

Главная - Вопросы по программированию - Как передать данные формы из дочернего компонента в родительский компонент

Как передать данные формы из дочернего компонента в родительский компонент

#reactjs #parent-child #child-process

#reactjs #родитель-потомок #дочерний процесс

Вопрос:

Я хочу отправить данные формы, которые находятся в моем дочернем компоненте, в родительский компонент. В функции отправки я написал в родительском компоненте. Родительский компонент : 

     handleChangeValue = (e) => {
      this.setState({
        [e.target.name]: e.target.value,
        [e.target.value]: e.target.value
     });
   }

   handleSubmit() {
      var newObj = {
      'id' : this.state.id,
      'name' : this.state.name,
   };

   render() {
     return (
       <div className="App">
        <UsingForm onChangeValue = 
         {this.handleChangeValue} handleSubmit = {this.handleSubmit}> 
         </UsingForm>
      </div>
     );
   }

И дочерний компонент:

  <form onSubmit={this.handleSubmit}>
     <label>
      Name:
        <input type="text" name="uname" value = {this.props.uname} 
        onChange={(e)=>this.props.onChangeValue(e)}></input>
     </label>
     <label>
     ID:
      <input type="text" name="id" value = {this.props.id} onChange= 
       {(e)=>this.props.onChangeValue(e)}></input>
      </label>
      <input type="button" value="Submit" onClick= 
      {this.props.handleSubmit} />
 </form>

Не получая значения состояния handleSubmit() , почему?

Комментарии:

1. Свяжите функцию handleSubmit или используйте выражение со стрелкой, передайте реквизиты uname и id, также инициализируйте их раньше.

Ответ №1:

вы должны привязать handleSubmit функцию с помощью функции со стрелкой

 handleSubmit = () => {
      var newObj = {
      'id' : this.state.id,
      'name' : this.state.name,
      };

или в конструкторе

 constructor(props) {
  ...
  this.handleSubmit.bind(this)
}

Комментарии:

1. Спасибо, я это сделал. Теперь это выдает мне такую ошибку: «Ошибка типа: не удается прочитать свойство ‘state’ неопределенного handleSubmit» в моем handleSubmit(). handleSubmit() { var newObj = { ‘id’ : this.state.id , «имя» : this.state.name , }; console.log( консоль.журнал(newObj);

2. В handleSubmit вашем дочернем компоненте нет метода. Пожалуйста, удалите onSubmit={this.handleSubmit} из своего <form> тега в дочернем компоненте

Ответ №2:

Вы должны изменить 

 <label>
  Name:
    <input type="text" name="name" value = {this.props.name} 
    onChange={(e)=>this.props.onChangeValue(e)}></input>
 </label>

и

 <UsingForm onChangeValue = 
     {this.handleChangeValue} handleSubmit = {this.handleSubmit} name={this.state.name} id={this.state.id}> 
</UsingForm>