迹忆客 专注技术分享

在 React 中将 onChange 事件处理程序传递给子组件：

1. 在父组件中定义事件处理函数。
2. 将其作为道具传递给子组件，例如 <Child handleChange={handleChange} />。
3. 将其设置为子项输入字段上的 onChange 属性。

import {useState} from 'react';

function Child({handleChange}) {
  return (
    <input
      id="message"
      name="message"
      onChange={handleChange}
    />
  );
}

export default function App() {
  const [message, setMessage] = useState('');

  function handleChange(event) {
    setMessage(event.target.value);
  }

  return (
    <div>
      <Child handleChange={handleChange} />

      <h2>Message is: {message}</h2>
    </div>
  );
}

我们将 handleChange 函数传递给子组件。

注意 ，在将它作为属性传递时，我们没有调用该函数。 传递对函数的引用非常重要，而不是调用函数的结果。

如果我们传递调用函数的结果，例如 handleChange={handleChange()}，那么它会在页面加载时立即被调用，这不是我们想要的。

如果要将参数传递给作为道具传递的函数，请使用内联箭头函数。

import {useState} from 'react';

function Child({handleChange}) {
  return (
    <input
      id="message"
      name="message"
      onChange={handleChange}
    />
  );
}

export default function App() {
  const [message, setMessage] = useState('');

  function handleChange(event, anotherParam) {
    console.log(anotherParam);
    setMessage(event.target.value);
  }

  return (
    <div>
      <Child handleChange={event => handleChange(event, 'another param')} />

      <h2>Message is: {message}</h2>
    </div>
  );
}

在将参数作为 prop 传递给 Child 组件时，我们将参数传递给了 handleChange 函数。 但是，请注意，我们仍然将函数作为属性传递，而不是调用的结果。

我们还可以在子组件中作为属性传递的函数中添加额外的功能。

import {useState} from 'react';

function Child({handleChange}) {
  function wrapHandleChange(event) {
    console.log('Child triggered onChange');

    // 👉️ your logic before
    handleChange(event);
    // 👉️ your logic after
  }

  return (
    <input
      id="message"
      name="message"
      onChange={wrapHandleChange}
      autoComplete="off"
    />
  );
}

export default function App() {
  const [message, setMessage] = useState('');

  function handleChange(event) {
    setMessage(event.target.value);
  }

  return (
    <div>
      <Child handleChange={handleChange} />

      <h2>Message is: {message}</h2>
    </div>
  );
}

我们将 handleChange 函数包装到另一个函数中，我们可以在调用它之前或之后运行一些额外的逻辑。

当我们必须等待 Promise 的返回值或根据输入字段的值运行一些逻辑时，这很有用。