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

Question

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

    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(), почему?

Answer 1

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

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

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

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

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