Question

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

我尝试使用状态和道具，但似乎我缺少了一些东西。它告诉我您正在尝试对未定义的值使用道具。我不知道在哪里。我尝试了Google搜索，并进行了一些搜索。到目前为止，没有任何效果。

这是我的代码：

父母：

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>

  }

Child2：

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

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

我收到未定义的值错误。

Answer 1

如果我们为表单定义一个terminal.integrated.windows.shell: C:\\Users\\<user_name>\\Softwares\\Git\\bin\\bash.exe侦听器和处理程序，则您的组件运行良好。我们还需要调用onSubmit来停止刷新页面，这样，当您调用event.preventDefault()

时，值实际上会传递给父组件。

请参阅代码和框：https://codesandbox.io/s/gallant-ellis-76bdv

this.props.changeValue()

Answer 2

要在React中获得一个元素，您可以在每个输入上使用引用，也可以在https://reactjs.org/docs/refs-and-the-dom.html形式上使用一个引用

constructor(props) {
    super(props);
  }

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

setName = (name) => {
   this.name = name;
}

setAge = (age) => {
   this.age = age;
}

setGender = (gender) => {
   this.gender = gender;
}

render() {

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

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

2 个答案: