react-hook-form(V7)：如何通过 onChange 将 function 传递给嵌套的 Material UI 组件

Question

I am have a Material UI nested component that look as follow:

imports . . . 

const TxtInput = ({ name, value, label, required }) => {
  const { control, ...rest } = useFormContext()
  return (
    <Controller
      name={name}
      defaultValue={value}
      control={control}
      render={({
        field: { onChange, onBlur, value, name, ref }
      }) =>
        <TextField
          required={required}
          fullWidth
          label={label}
          id={name}
          inputProps={{ 'aria-label': label }}
          onBlur={onBlur}
          onChange={onChange}
          checked={value}
          inputRef={ref}
          {...rest}
        />}
    />
  )
}

export default TxtInput

While in my app.js, <TxtInput /> look like this:

<FormProvider {...methods}>
    <form onSubmit={handleSubmit(submit)}>
        <TxtInput
        name='fullName'
        label='First and last name'
        required
        value=''
        onChange={() => console.log('hello')}
    </form>
</FormProvider>

And I am expecting to see 'Hello' with every keystroke in my console but, that is not the case.

Does anyone know why?

Answer 1

I think what you want is to pass the onChange event to the TxtInput instead of using its own Controller onChange

const TxtInput = ({ name, value, label, required, onChange }) => { // add onChange here
  const { control, ...rest } = useFormContext()
  return (
    <Controller
      name={name}
      defaultValue={value}
      control={control}
      render={({
        field: { onBlur, value, name, ref } // remove onChange here to allow pass though from parent onChange
      }) =>
        <TextField
          required={required}
          fullWidth
          label={label}
          id={name}
          inputProps={{ 'aria-label': label }}
          onBlur={onBlur}
          onChange={onChange}
          checked={value}
          inputRef={ref}
          {...rest}
        />}
    />
  )
}

---

make a codesandbox to simulate your case as well. You can check it out

https://codesandbox.io/s/runtime-hill-9q2qu?file=/src/App.js

Answer 2

The last nested onChanged function should be returned as ()=>onChangeFn