结合 react-hook-form 从 MUI 更新 TextField。 onChange 没有被调用答案

【问题标题】：Update TextField from MUI in conjunction with react-hook-form. onChange is not being called结合 react-hook-form 从 MUI 更新 TextField。 onChange 没有被调用
【发布时间】：2022-01-16 06:46:14
【问题描述】：

const [userData, setUserData] = useState({
  fullName: "",
  email: "",
}); // Local component state

const onChange = (event) => {
   console.log(event.target.value);
}; // Evente handler

<Grid container spacing={1}>
  <Grid item xs={12} sm={12}>
     <TextField
        required
        id="name"
        name="fullName"
        onChange={onChange}
        label="Name"
        InputLabelProps={{ shrink: true }}
        fullWidth
        value={userData.fullName}
        margin="dense"
       />
         <Typography variant="inherit" color="textSecondary">
           {errors.fullName?.message}
         </Typography>
 </Grid>
   <Grid item xs={12} sm={12}>
     <TextField
        required
        id="email"
        name="email"
        label="Email"
        onChange={onChange}
        fullWidth
        margin="dense"
        value={userData.email}
        {...register("email")}
        error={errors.email ? true : false}
       />
       <Typography variant="inherit" color="textSecondary">
         {errors.email?.message}
        </Typography>
   </Grid>

由于某种原因，没有调用 onChange。我也使用 Yup 进行验证。我需要更新输入值并将其发送到 API。但由于某种原因，事件处理程序没有被调用

【问题讨论】：

标签： reactjs material-ui react-hook-form yup

【解决方案1】：

您将使用{...register("email")} 的传播覆盖onChange 属性，因为register 调用将返回一个对象，其中一个属性名为onChange，RHF 需要更新其内部表单状态。因此，当您使用 RHF 时，您根本不需要自己的 onChange 处理程序，因为您可以直接通过 RHF 访问当前的 <TextField /> 值。您只需通过 useForm defaultValues 或直接将默认值传递给 <Controller /> 而不是通过 value 属性直接设置它。

我还建议将<Controller /> 与register 一起使用，您将失去为<TextField /> 输入元素设置正确ref 的功能，因为它通过inputRef 属性链接而不是使用RHF register 使用的ref。当您希望在提交表单时验证失败时立即聚焦某个字段时，这会派上用场。

您还可以使用<TextField /> 的error 和helperText 道具来显示您的错误并通过<Controller /> fieldState 对象访问它以获取当前的验证错误（如果有的话）。

<Grid container spacing={1}>
  <Grid item xs={12} sm={12}>
    <Controller 
      control={control}
      name="fullName"
      defaultValue={userData.fullName}
      render={({ field: { ref, ...field }, fieldState: { error } }) => (
        <TextField
          required
          id={field.name}
          label="Name"
          InputLabelProps={{ shrink: true }}
          fullWidth
          margin="dense"
          error={!!error}
          helperText={error?.message}
        />
      )}
    />
  </Grid>
  <Grid item xs={12} sm={12}>
   <Controller 
      control={control}
      name="email"
      defaultValue={userData.email}
      render={({ field: { ref, ...field }, fieldState: { error } }) => (
        <TextField
          required
          id={field.name}
          label="Name"
          InputLabelProps={{ shrink: true }}
          fullWidth
          margin="dense"
          error={!!error}
          helperText={error?.message}
        />
      )}
    />
  </Grid>
</Grid>

【讨论】：