反应-子组件可以将值发送回父表单吗

小编典典

反应-子组件可以将值发送回父表单吗

reactjs

该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>;
  }
}

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

阅读 200

2020-07-22

共1个答案

小编典典

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

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

  //...

  handleChangeValue = e => this.setState({value: e.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}
      />
    );
  }
}

请注意， 父组件处理状态，而子组件仅处理display
。Facebook的“提升状态”指南是学习如何执行此操作的好资源。

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

2020-07-22