Saya memiliki komponen bersarang UI Material yang terlihat sebagai berikut:

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

Saat berada di app.js saya, <TxtInput /> terlihat seperti ini:

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

Dan saya berharap untuk melihat 'Halo' dengan setiap penekanan tombol di konsol saya, tetapi bukan itu masalahnya.

Apakah ada yang tahu mengapa?

0
aadlc 12 Mei 2021, 23:29

2 jawaban

Jawaban Terbaik

Saya pikir yang Anda inginkan adalah meneruskan acara onChange ke TxtInput alih-alih menggunakan Controller onChange-nya sendiri

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

Buat kode dan kotak untuk mensimulasikan kasus Anda juga. Anda dapat memeriksanya

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

1
Mic Fung 12 Mei 2021, 20:54

Fungsi onChanged bersarang terakhir harus dikembalikan sebagai ()=>onChangeFn

0
Shiva Sai 12 Mei 2021, 20:35