这是我的例子
https://codesandbox.io/s/react-hook-form-basic-forked-4stdl?file=/src/index.js
它有 2 个输入示例 - firstName 和 lastName。
在 firstName 中正确键入空格会显示错误。
在 lastName 中输入空格(使用 Controller )直到第二次按键才会显示错误。它不会在第一次更改时触发。
不知道这是为什么。
import React, { FC } from "react";
import { useFormContext, useWatch, Controller } from "react-hook-form";
export interface Props {
name: string;
label?: string;
defaultValue?: string;
}
const ControlledInput: FC<Props> = ({
name,
label: labelText = "",
defaultValue = ""
}) => {
const { register, control, errors } = useFormContext();
const label = labelText || name;
const value = useWatch({
control,
name,
defaultValue
});
console.log(
`ControlledInput() render(), name=${name}, defaultvalue="${defaultValue}", value="${value}"`
);
return (
<div>
<Controller
control={control}
name={name}
defaultValue={defaultValue}
render={(props) => {
const errorText = errors[name]?.type;
// console.log('#################################');
// console.log('name = ', name);
// console.log(`errors[${name}] = `, errors[name]);
// console.log('type = ', type);
// console.log('errorText =', errorText);
return (
<>
<input
name={props.name}
defaultValue={defaultValue}
ref={register({
validate: {
beginSpace: (value) => /^\S/.test(value)
}
})}
type={"text"}
placeholder={label}
aria-label={label}
data-error={errorText !== "" && errorText}
/>
{errorText ? (
<span style={{ color: "white" }}>
{label} ERROR: {errorText}
</span>
) : null}
</>
);
}}
/>
</div>
);
};
export default ControlledInput;
最佳答案
我真的不知道为什么会这样,但是如果您将验证规则放在 Controller
上,它会在第一次更改时正确更新直接在rules
Prop 而不是将它们交给 register
包含的输入。
Here is the codesandbox .
这是代码的一部分:
<Controller
control={control}
name={name}
defaultValue={defaultValue}
rules={{
validate: {
beginSpace: (value) => /^\S/.test(value)
}
}}
render={(props) => {
const errorText = errors[name]?.type;
return (
<>
<input
name={props.name}
defaultValue={defaultValue}
ref={register}
type={"text"}
placeholder={label}
aria-label={label}
data-error={errorText !== "" && errorText}
/>
{errorText ? (
<span style={{ color: "white" }}>
{label} ERROR: {errorText}
</span>
) : null}
</>
);
}}
/>
关于typescript - react-hook-form - Controller 不会在第一次更改时更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66729620/