React - 子组件能否将值发送回父表单

Question

InputField & Button 是进入表单以创建表单的自定义组件。我的问题是如何将数据发送回表单，以便在单击按钮时，我可以使用数据（用户名和密码）在表单上触发 ajax：

 export default auth.authApi(
  class SignUpViaEmail extends Component{

    constructor(props){
      super(props);
      this.state = {
        email : "",
        password : ""
      };
      this.storeEmail = this.storeEmail.bind( this );
      this.storePassword = this.storePassword.bind( this );
    }

    storeEmail(e){
      this.setState({ email : e.target.value });
    }

    storePassword(e){
      this.setState({ password : e.target.value });
    }

    handleSignUp(){
      this.props.handleSignUp(this.state);
    }

    render(){
      return(
        <div className="pageContainer">

          <form action="" method="post">
            <InputField labelClass = "label"
                        labelText = "Username"
                        inputId = "signUp_username"
                        inputType = "email"
                        inputPlaceholder = "registered email"
                        inputClass = "input" />
            <Button btnClass = "btnClass"
                    btnLabel = "Submit"
                    onClickEvent = { handleSignUp } />
          </form>
        </div>
      );
    }

  }
);

或者不推荐并且我不应该在表单中创建自定义子组件？

子组件 => InputField

 import React,
       { Component } from "react";

export class InputField extends Component{

  constructor( props ){
    super( props );
    this.state = {
      value : ""
    };
    this.onUserInput = this.onUserInput.bind( this );
  }

  onUserInput( e ){
    this.setState({ value : e.target.value });
    this.props.storeInParentState({[ this.props.inputType ] : e.target.value });
  }

  render(){
    return  <div className = "">
              <label htmlFor = {this.props.inputId}
                     className = {this.props.labelClass}>
                {this.props.labelText}
              </label>
              <input id = {this.props.inputId}
                     type = {this.props.inputType}
                     onChange = {this.onUserInput} />
              <span className = {this.props.validationClass}>
                { this.props.validationNotice }
              </span>
            </div>;
  }
}

错误：我在父 storeEmail 函数上收到错误 e.target is undefined 。

原文由 Kayote 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 的单向数据绑定模型意味着子组件不能将值发送回父组件 ，除非明确允许这样做。 React 的做法是将回调传递给子组件（请参阅 Facebook 的“表单”指南）。

 class Parent extends Component {
  constructor() {
    this.state = {
      value: ''
    };
  }

  //...

  handleChangeValue = event => this.setState({value: event.target.value});

  //...

  render() {
    return (
      <Child
        value={this.state.value}
        onChangeValue={this.handleChangeValue}
      />
    );
  }
}

class Child extends Component {
  //...

  render() {
    return (
      <input
        type="text"
        value={this.props.value}
        onChange={this.props.onChangeValue}
      />
    );
  }
}

请注意， 父组件处理状态，而子组件仅处理显示。 Facebook 的“Lifting State Up”指南 是学习如何做到这一点的好资源。

这样， 所有数据都存在于父组件中（在状态中），而子组件仅提供更新该数据的方法（回调作为 props 传递） 。现在您的问题已解决：您的父组件可以访问它需要的所有数据（因为数据存储在状态中），但是您的子组件负责将数据绑定到它们自己的各个元素，例如 <input> 标签。

---

附录

回应这条评论：

如果我们渲染子组件列表怎么办？在Lifting state up技术中使用这个单一的真实来源会让父级控制所有子级输入的所有状态，对吗？那么我们如何从父组件访问子组件中输入的每个值（呈现为列表）呢？

对于这种情况，您可以为列表中的每个元素映射一个子组件。例如：

 class Parent extends Component {
  //...
  handleChangeListValue = index => event => {
    this.setState({
      list: this.state.list
        .map((element, i) => i === index ? event.target.value : element)
    });
  }
  //...
  render() {
    return this.state.list.map((element, i) => (
      <Child
        value={element}
        onChangeValue={this.handleChangeListValue(i)}
      />
    ));

PS 免责声明：以上代码示例仅用于说明相关概念（Lifting State Up），并反映回答时React代码的状态。关于代码的其他问题，例如不可变与可变数组更新、静态与动态生成的函数、有状态与纯组件以及基于类与基于钩子的有状态组件，最好完全作为一个单独的问题提出。

原文由 Ian Emnace 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

反应类组件

父类.js

 import React, { Component } from 'react';
import Child from './child'
class Parent extends Component {
  state = {
    value: ''
  }
  onChangeValueHandler = (val) => {
    this.setState({ value: val.target.value })
  }
  render() {
    const { value } = this.state;
    return (
      <div>
        <p> the value is : {value} </p>
        <Child value={value} onChangeValue={this.onChangeValueHandler} />
      </div>
    );
  }
}

export default Parent;

子.js

   import React, { Component } from 'react';
  class Child extends Component {
  render() {
  const { value , onChangeValue } = this.props;
  return (
    <div>
      <input type="text"  value={value} onChange={onChangeValue}/>
    </div>
  );
}
}
  export default Child;

反应钩子

父类.js

 import { useState } from "react";
import Child from "./child";
export default function Parent() {
const [value, changeValue] = useState("");
return (
  <div>
    <h1>{value}</h1>
    <Child inputValue={value} onInputValueChange={changeValue} />
  </div>
 );
}

子.js

 export default function Child(props) {
return (
   <div>
       <input
        type="text"
        value={props.inputValue}
        onChange={(e) => props.onInputValueChange(e.target.value)}/>
   </div>
 );
}

原文由 Ali Mohammad 发布，翻译遵循 CC BY-SA 4.0 许可协议