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。

最佳答案

React 的单向数据绑定(bind)模型意味着子组件不能将值发送回父组件除非明确允许这样做。 React 的做法是将回调传递给子组件(参见 Facebook's "Forms" guide )。

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's "Lifting State Up" guide是学习如何执行此操作的良好资源。

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

附录

回应这条评论:

What if we render a list of the child component? Using this single source of truth in Lifting state up technique will let the parent controls all the state of all the child inputs right? So how can we access each of the value input in the child component to (which is rendered as list) from the parent component?

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

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)}
      />
    ));

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

关于javascript - React - 子组件能否将值发送回父表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41619166/