javascript - React-hook-form 必须按两次才能删除输入的最后一个字符，两次才能输入第一个字符

Question

我使用 React Hook Form 来验证我的表单，包括许多输入。一切都是五，除了一个问题，我必须按两次退格键删除最后一个字符，两次输入第一个字符。例如。如果我需要显示输入值是“jonh”，那么我必须按两次“j”才能显示这个字母。当我删除'john'时，'n'按1个退格键，'h'按1个退格键，'o'按1个退格键，'j'按2个退格键。我认为这是来自 react hook 形式，因为我不使用，没问题。感谢任何帮助。太感谢了。

Codesanbox：https ://codesandbox.io/s/react-hook-form-j63o9?file=/src/App.js

标签： javascriptreactjsreact-hook-form

Answer 1

你现在没有使用 React-Hook-Form。您只导入它并注册它。

这是如何使用 React-Hook-Form：

import React from 'react'
import { useForm } from 'react-hook-form'


const { register, handleSubmit } = useForm({
    defaultValues: {
      name: '',
      code: '',
      description: '',
      price: '',
      weight: '',
      long: '',
      width: '',
      high: '',
    },
  });

const onSubmit = async (data) => {

};

<form className="popup-product__form" onSubmit={handleSubmit(onSubmit)}>
    <input
        type="text"
        name="name"
        className="form-control"
        placeholder="Message"
        ref={register({
            required: 'Errors Message ....',
        })}
    />
    {errors.name && (
        <div className="form-error">
            {errors.name.message}
        </div>
    )}
   <input value="Submit" type="submit"/>
</form>