输入未写入输入字段.. React useForm Hook 注册验证引起的问题

Question

const { register, handleSubmit, errors, setValue } = useForm();
<div className="col pl-0 pr-3">
   <FormInput
      id="id"
      name="name"
      isAllowed={e => e.value == '' || (e.value.length <= 14 && e.floatValue >= 0)}
      allowLeadingZeros={true}
      decimalScale={0}
      onChange={e => setName(e.target.value)}
      value={Name}
      ref={register({ required: { value: true, message: "Please enter name" } })}
    />
   <ErrorMessage
      errors={errors}
      className="col-md-6"
      name="name"
      as="small"
    />
</div>

在上面的代码中，这里的FormInput是从StyledInput自定义的。

显示无效消息后，当我尝试在输入字段中输入内容时，第一个字符未写入字段，但它正在清除第二个字符写入字段的无效错误消息。有什么问题如何解决谁能帮我解决这个问题吗？

Answer 1

已更新

通过使用控制输入，第 3 方库可以使用 react-hook-form。 https://react-hook-form.com/get-started#IntegratingControlledInputs

<Controller
    as={
       <NumberFormat
           thousandSeparator={true}
           allowLeadingZeros={true}
           decimalScale={0}
           onValueChange={(value) => {
             console.log(value);
           }}
           isAllowed={(e) =>
             e.value === "" || (e.value.length <= 14 && e.floatValue >= 0)
           }
       />
   }
   id="id"
   name="name"
   defaultValue="1234"
   control={control}
   rules={{
      required: true,
      minLength: 2
   }}
/>

无需使用其他状态来控制值。该组件以名称“name”在 react-hooks-form 中注册，它将为您创建名称状态并处理状态更改。

删除以下行：

const [name, setName] = useState(); // I think you have your own name state, remove it
value={name} // remove it
onChange={(e) => setName(e.target.value)} // remove it

输入未写入输入字段.. React useForm Hook 注册验证引起的问题

Input not writing into input field.. Issue caused by React useForm Hook register validations

reactjs

react-hooks

react-forms