JIYIK CN >

Passing onChange event handlers to child components in React:

1. Define the event handling function in the parent component.
2. Pass it as a prop to the child component, eg <Child handleChange={handleChange} />.
3. Set it as the onChange property on the child input field .

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

We handleChangepass the function to the child component.

注意, we did not call the function when passing it as a property. It is very important to pass a reference to the function, not the result of calling the function.

If we pass the result of calling a function, for example handleChange={handleChange()}, then it will be called immediately when the page loads, which is not what we want.

If you want to pass arguments to a function passed as props, use an inline arrow function.

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

When passing arguments as props to the Child component, we passed the arguments to handleChangethe function. However, notice that we are still passing the function as a prop, not the result of the call.

We can also add additional functionality in functions passed as props in child components.

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

We handleChangewrap the function into another function where we can run some additional logic before or after calling it.

This is useful when we have to wait for the return value of a Promise or run some logic based on the value of an input field.