почему первая буква неактивна при вводе формы ответа

Question

Мне нужна помощь, чтобы понять, почему первая буква в простом компоненте ввода не зарегистрирована.

Я создал простой контролируемый ввод из примеров, но он не работает должным образом.

Я создал пример для вас https://stackblitz.com/edit/react-9zezqx

const App = () => {

const { register, handleSubmit, watch, errors, reset, control, formState } = useForm({ mode: 'onChange' });

console.log(errors)
    return (
      <div>
        <form onSubmit={handleSubmit(() => console.log("submit"))}>
            <Controller
                as={TextInput}
                name="firstname"
                defaultValue=""
                control={control}
                inputRef={register({ required: true, minLength: 8 })}
                hasErrors={errors.firstname !== undefined}
            />
            <br/>
            <Controller
                as={TextInput}
                name="hobby"
                defaultValue=""
                control={control}
                inputRef={register({ required: true, minLength: 8 })}
                hasErrors={errors.hobby !== undefined}
            />
            </form>
      </div>
    );

}

render(<App />, document.getElementById('root'));



import * as React from 'react';

export const TextInput = (props) => {
  return(
    <>
    <input    
      type="text"
      name={props.name}
      value={props.value}
      onChange={props.onChange}
      ref={props.inputRef}
     />
     {props.hasErrors && (<h2>errors!!</h2>)}
     </>
  )
}

Answer 1

хорошо, я нашел ошибку, вызывающую ее в 'onBlur', а также

reValidateMode: 'onBlur'

Answer 2

Это проблема здесь, вы пытаетесь использовать контроллер с регистром:

https://react-hook-form.com/api#Controller

<Controller
  as={TextInput}
  name="hobby"
  defaultValue=""
  control={control}
/>

или

https://react-hook-form.com/api#register

<TextInput inputRef={register} />

Answer 3

Переключите режим на onBlur, это улучшит производительность, сработает только тогда, когда пользователь покидает поле, что должно произойти, а также не проглотит первый вход.

onChange пропускает первую букву, потому что значение по умолчанию будет использоваться для начального вызова onChange, который является пустым.