javascript - REACT - 将事件处理程序附加到 child

Question

我正在尝试在 React 中创建一个 Form 组件，有点像 Formik ，但更简单。

我的想法是添加一个 onChange处理程序给所有的 child 。我用 children.map() 做这个.它有效，但是我收到一个关键警告

Warning: Each child in a list should have a unique "key" prop.

我知道没有办法抑制它，所以也许有更好的方法来创建这个 Form 组件？另外，我应该如何处理 <input> 时的情况？不是直子？

编辑:我知道如何避免这个问题，我主要想要解决这个问题的最佳方法，包括嵌套输入的情况。

下面是我想如何使用它:

<Form>
  <label htmlFor="owner">Owner</label>
  <input
    type="text"
    name="owner"
    id="owner"
  />
  <label htmlFor="description">Description</label>
  <input
    type="text"
    name="description"
    id="description"
  />
  <input
    type="submit"
    value="Submit"
  />
</Form>

这是我的代码:

import React from 'react';
    
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.handleInputChange = this.handleInputChange.bind(this);
  }
    
  handleInputChange(event) {
    const target = event.target;
    const value =
      target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    console.log(`${name} : ${value}`)
    this.setState({
      [name]: value
    });
  }
    
  render() {
    return (
      <form>
        {this.props.children.map((child) => {
          if (child.type === "input") {
            return (
              <input
                onChange={this.handleInputChange}
                {...child.props}
              />
            )
          }
        })}
      </form>
    )
  }
}
    
export default Form;

Answer 1

如果你使用渲染 Prop ，你根本不会遇到 unique "key" Prop 问题(这也是 Formik 的实现方式)。

您的组件很容易设置为将 handleChange 作为 render prop 传递给它的子组件，并且这也不需要您将 input 作为直接子组件.

class Form extends Component {
  ...
  handleInputChange() {...}

  render() {
    // Note that we call children as a function,
    // passing `handleChangeInput` as the argument.
    // If you want to pass other other things to the
    // children (handleSubmit, values from state), just
    // add them to the argument you're passing in.
    this.props.children({this.handleInputChange});
  }
}

使用方法如下:

<Form>
  // Notice that <Form> needs its immediate child to be
  // a function, which has your handler as the argument:
  {({handeInputChange}) => {
    return (
      <form>
        <input type="text" name="owner" onChange={handleInputChange} />
        <input type="checkbox" name="toggle" onChange={handleInputChange} />
        <div>
          // inputs can be nested in other elements
          <input name=“inner” onChange={handleInputChange} />
        <div>
      <form>
    )  
  }}
</Form>

编辑:您在评论中提到您不想将处理程序显式传递给每个输入。实现这一点的另一种方法是使用 React Context，在您的表单中使用一个提供者，并将每个 input 包装在一个消费者中:

const FormContext = React.createContext();

const FormInput = (props) => {
  const {handleInputChange} = useContext(FormContext);
  return <input handleInputChange={handleInputChange} {...props} />
}

class Form extends Component {
  ...
  handleInputChange() {...}

  render() {
    // Pass anything you want into `value` (state, other handlers),
    // it will be accessible in the consumer 
    <Provider value={{ handleInputChange: this.handleInputChange }}>
      <form>
        {this.props.children}
      </form>
    </Provider>
  }
}

// Usage:
<Form>
  <FormInput type="text" name="owner" />
  <FormInput type="submit" name="submit" />
  <div>
      <FormInput type="checkbox" name="toggle" />
  </div>
</Form>

事实上，Formik 也有这个选项，可以使用 Field 组件，也可以使用 connect 函数。