3

我需要帮助来理解为什么简单输入组件中的第一个字母没有注册。

我从示例中创建了一个简单的受控输入，但它无法正常工作。

我为您创建了一个示例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>)}
     </>
  )
}
4

4 回答 4

2

好的，我也在“onBlur”中发现了导致它的错误

reValidateMode: 'onBlur'
于 2020-04-10T14:29:36.597 回答
1

您可能正在使用不受控制的输入。如果是这种情况，请使用defaultValue而不是value.

参考

于 2021-02-08T16:17:09.603 回答
1

将模式切换为onBlur，这将提高性能，仅当用户离开该字段时才会触发，这是假设发生的，并且不会吞下第一个输入。

onChange跳过第一个字母，因为默认值将用于初始 onChange 调用，它是空的。

于 2020-04-10T14:17:55.767 回答
0

这是这里的问题，您尝试使用带有寄存器的控制器：

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} />
于 2020-04-11T04:02:23.213 回答