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

Question

我有一个 Material UI 嵌套组件，如下所示：

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

而在我的 app.js 中，<TxtInput /> 看起来像这样：

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

我希望在我的控制台中每次击键都能看到 'Hello'，但事实并非如此。

有人知道为什么吗？

Answer 1

最后一个嵌套的 onChanged 函数应该返回为 ()=>onChangeFn

Answer 2

我想你想要的是将 onChange 事件传递给 TxtInput 而不是使用它自己的控制器 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}
        />}
    />
  )
}

也制作一个codesandbox来模拟你的情况。你可以看看

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

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

react-hook-form(V7): How to pass a function via onChange to a nested Material UI component

reactjs

material-ui

react-hook-form