Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Please let me know why the internal onchange is not working?

While using the ui template and React Hook Form, I noticed this problem while defining the onChange property because something happened to customize the AutoComplete component.
Can you tell me why the child’s onChange doesn’t work when onChange works in the parent component?

<RHFAutocomplete
  onChange={(event, newValue) => {
  if (newValue) {
  console.log('out');
  setValue(`tasks[${index}].programName`, newValue, { shouldValidate: true });
  }
/>

export default function RHFAutocomplete({ name, label, helperText, ...other }) {
  const { control, setValue } = useFormContext();
  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => (
        <Autocomplete
          {...field}
          onChange={(event, newValue) => {

            console.log('in'); // Why isn't it working?

            setValue(name, newValue, { shouldValidate: true });
          }}
          {...other}
        />
      )}
    />
  );
}

Maybe it’s a problem with another code, so I just left the console, but the "in" inside doesn’t output. Help me

Tags:

2

Answers


  1. 0

    From your code, it seems that the problem is the way you pass the onChange prop down to the Autocomplete. Also, you are using Controller from React Hook Form.
    The onChange prop you are passing to the ‘Autocomplete’ component within the render function of ‘Controller’ doesn’t directly interact with the RHF’s form state. Instead Autocomplete component treat onChange as a regular prop. So the console won’t work as you expect.

    You can modify the render function to

    export default function RHFAutocomplete({ name, label, helperText, ...other }) {
  const { control, setValue } = useFormContext();
  return (
    <Controller
      name={name}
      control={control}
      render={({ field}) => (
        <Autocomplete
          {...field}
          onChange={(event, newValue) => {
            field.onChange(newValue)
          }}
          {...other}
        />
      )}
    />
  );
}
    Login or Signup to reply.
  2. 0

    It looks like onChange event is overridden by {…other}, so it calling onChange from ‘<RHFAutocomplete onChange={(event, newValue) => {‘.

    if you want to call both, change the event name for other parameter. something called onChangeValue. or create onChange seperate function argument.

    export default function RHFAutocomplete({ name, label, helperText, onChange, ...other }) {
    const { control, setValue } = useFormContext();
return (
<Controller
  name={name}
  control={control}
  render={({ field, fieldState: { error } }) => (
    <Autocomplete
      {...field}
      onChange={(event, newValue) => {

        console.log('in'); // Why isn't it working?
onChange(event,newValue)

        setValue(name, newValue, { shouldValidate: true });
      }}
      {...other}
    />
  )}
/>
);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search