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

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

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

我们将 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 的返回值或根据输入字段的值运行一些逻辑时,这很有用。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 将 onChange 事件处理程序传递给 React 中的子组件