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

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>

  }

儿童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()时，值实际上会传递给父组件。

参见codeandbox： 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;

Answer 2

为了在React中获得一个元素，您可以在每个输入上使用ref或以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)} />