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

【问题标题】：How to pass form values from child component to parent in react如何在反应中将表单值从子组件传递给父组件
【发布时间】：2019-06-04 09:08:28
【问题描述】：

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

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

这是我的代码：

家长：

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 的表单值。

我收到一个未定义值错误。

【问题讨论】：

您可以在子组件中创建带有函数的prop onChange，处理程序将更新父组件并在子组件中调用。
e.target.name.value 不引用名称输入。您必须为此使用 refs，或者正如 jcubic 所说，对每个 prop 使用 onChange 处理程序和 e.target.value
@Hafsa，只要您在表单标签上使用 onSubmit 侦听器，您的组件就应该按预期工作。有关详细信息，请参阅下面的答案。
感谢 jcubic 和 Cody Swan。我会试试的。

标签： javascript reactjs

【解决方案1】：

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

查看代码框：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;

【讨论】：

@HafsaMushtaq 非常欢迎您，如果您愿意，我可以通过练习向您展示如何实施其他建议，但我发现这是最干净的。您是否考虑将我的解决方案标记为答案。 :)
谢谢@Christopher。我确实将您的解决方案作为答案。

【解决方案2】：

要在 React 中获取元素，您可以在每个输入上使用 refs 或在 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)} />

【讨论】：

我将介绍 refs 的概念