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

Posted 2023-02-21

【中文标题】结合 react-hook-form 从 MUI 更新 TextField。 onChange 没有被调用

【英文标题】：Update TextField from MUI in conjunction with react-hook-form. onChange is not being called

【发布时间】：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。但由于某种原因，事件处理程序没有被调用

【参考方案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>