javascript - 通过状态传递 onChange 事件

Question

我正在创建一个表单组件，我希望能够传递每个表单元素的更改元素，但我似乎无法让它正常工作。

我有我的登录组件

import React from "react";
import './LoginComponent.css';

import FormComponent from '../FormComponent/FormComponent';

class LoginComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      header: "Login",
      id: "login-form",
      name: "login-form",
      items: [
        {
          element: "input",
          type: "email",
          id: "lf-email",
          name: "lf-email",
          value: "",
          onChange: this.handleOnChangeEmail.bind(this),
          placeholder: "Email",
          img: {},
        },
        {
          element: "input",
          type: "password",
          id: "lf-password",
          name: "lf-password",
          value: "",
          onChange: ,
          placeholder: "Password",
          img: {},
        },
        {
          element: "checkbox",
          id: "lf-remember-me",
          name: "lf-remember-me",
          value: "lf-remember-me",
          onChange: ,
          display: "Remember Me",
          isSelected: false
        }
      ]
    }
  }

  // Figure out how to pass onChange functions per item in state.
  handleOnChangeEmail(e) {
     console.log("Email changed");
  }

  render() {
    return (
      <div className="LoginComponent">
        {/* 
            Create onSubmit function for submitting the form
            Create handle change functions for inputs
        */}
        <FormComponent id={ this.state.id } name={ this.state.name } onSubmit="" header={ this.state.header } items={ this.state.items } />
      </div>
    );
  }
}

export default LoginComponent;

如您所见，我想在组件状态中传递 handle 函数，以便我可以唯一地处理表单输入。当我运行这段代码时，它失败了，因为我无法在状态中传递函数。是否允许或能够以其他方式完成此类请求？

我知道您可以将绑定(bind)函数直接传递给组件，但表单组件是基于 state.item 数组动态构建的。

这是我的表单组件

import React from "react";
import './FormComponent.css';

import InputComponent from './InputComponent/InputComponent';
import FormHeaderComponent from './FormHeaderComponent/FormHeaderComponent';
import CheckboxComponent from "./CheckboxComponent/CheckboxComponent";

class FormComponent extends React.Component {
  render() {
    const formItems = this.props.items.map((item) => {
      switch(item.element) {
        case "input":
          return <InputComponent type={ item.type } id={ item.id } name={ item.name } placeholder={ item.placeholder } value={ item.value } onChange={ item.onChange } />
        case "checkbox":
          return <CheckboxComponent id={ item.id } name={ item.name } value={ item.value } selected={ item.isSelected } onChange={ item.onChange } display={ item.display } />
        default:
          return <InputComponent />;
      }
    });

    return (
        <form id={ this.props.id } name={ this.props.name }>
            <FormHeaderComponent header={ this.props.header } />

            {/* 
              Setup handling of submit functions
              Setup handling of onchange function for inputs
            */}

            { formItems }
        </form>
    );
  }
}

export default FormComponent;

正如您在 formItems 中看到的，我正在尝试使用传入状态的 onChange 函数创建元素。我们将不胜感激任何帮助或建议。我也很清楚我可以让表单组件成为一个加载所有传递的子组件的组件，这样您基本上可以在没有状态的登录组件中构建表单，但我希望情况并非如此。

Answer 1

在状态中存储要传递给子级的方法通常不是一个好主意。我提出了一个替代方案。

考虑 onChange功能，仍将驻留在 LoginComponent 中并将作为 Prop 传递给 <FormComponent />

处理程序的编写方式使您能够通过取 name 来识别调用它的子组件。属性，无需为每个输入创建唯一的处理程序。

登录组件:

  handleOnChangeEmail(e) {
    const { name, value } = e.target;
    console.log(`${name} changed to ${value}`);
  }

  render() {
    return (
      <div className="LoginComponent">
        <FormComponent
          id={this.state.id}
          name={this.state.name}
          onSubmit=""
          header={this.state.header}
          items={this.state.items}
          formOnChange={this.handleOnChangeEmail}
        />
      </div>
    );
  }

然后当您迭代并构建您的 InputComponent 时，将其传递给它的 onChange :

表单组件:

class FormComponent extends React.Component {
  render() {
    const formItems = this.props.items.map(item => {
      switch (item.element) {
        case "input":
          return (
            <InputComponent
              type={item.type}
              id={item.id}
              name={item.name}
              placeholder={item.placeholder}
              value={item.value}
              onChange={this.props.formOnChange}
            />
          );
        case "checkbox":
          return (
            <CheckboxComponent
              id={item.id}
              name={item.name}
              value={item.value}
              selected={item.isSelected}
              onChange={this.props.formOnChange}
              display={item.display}
            />
          );
        default:
          return <InputComponent />;
      }
    });

    return (
      <form id={this.props.id} name={this.props.name}>
        <FormHeaderComponent header={this.props.header} />
        {formItems}
      </form>
    );
  }
}

PS:别忘了bind您的函数或使用箭头函数。