如何在反应中将表单值从子组件传递给父组件

Question

我是新手，我试图将表单中的值传递给父组件，然后在其他子组件中显示这些值。

我尝试使用状态和道具，但似乎我错过了一些东西。它告诉我你正试图在未定义的值上使用道具。我不知道在哪里。我尝试谷歌搜索并进行了一些搜索。目前没有任何效果。

这是我的代码：

家长：

constructor(props) {
    super(props);

    this.state = {
      name: "",
      age:"",
      gender:""
    };
  }

  changeValue(name,age,gender) {
    this.setState({
      name: name,
      age:age,
      gender:gender
    });
  }

  render() {
    return (
      <div>
        <FormView changeValue={this.changeValue.bind(this)}/>
        <DisplayView name={this.state.name} age= {this.state.age} gender= {this.state.gender}/>
      </div>
    );
  }

孩子 1 :

constructor(props) {
        super(props);
      }

      handleChange(e){
        this.props.changeValue(e.target.name.value,e.target.age.value,e.target.gender.value);
      }

  render() {

    return <form>
        <label>
        Name:
        <input type="text" name="name"  />
        </label>
        <label>
        Age:
        <input type="number" name="age"   />
        </label>
        <label>
        Gender:
        <select name="gender" >
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
        </label>
        <input type="button" value="Submit" onClick = {this.handleChange.bind(this)} />
   </form>

  }

孩子2：

 render(){
        return (
          <div>
             <p>{this.props.name}</p> 
             <p>{this.props.age}</p>
             <p>{this.props.gender}</p>
          </div>
        )
      }

我期望在 child2 中显示 child1 的表单值。

我收到未定义值错误。

Answer 1

如果我们onSubmit为表单定义侦听器和处理程序，您的组件就可以正常工作。我们还需要调用event.preventDefault()来阻止页面刷新，这样当您调用时，值实际上会传递给父组件 this.props.changeValue()

见codesandbox：https ://codesandbox.io/s/gallant-ellis-76bdv

import React from "react";

class FormView extends React.Component {
  constructor(props) {
    super(props);
  }

  handleChange(e){
    e.preventDefault()
    this.props.changeValue(
      e.target.name.value,
      e.target.age.value,
      e.target.gender.value
    );
  };

  render() {
    return (
      <form onSubmit={this.handleChange.bind(this)}>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Age:
          <input type="number" name="age" />
        </label>
        <label>
          Gender:
          <select name="gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default FormView;