カスタムの動的入力フィールド配列でreact-hook-formを使用しています。送信ボタンをクリックしたときに検証が機能しているようですが、エラーメッセージが表示されず、次のように状態を作成しています。
const [formFields, setFormFields] = useState([
{
height: 45,
label: "tv",
placeholder: "555",
name: "tv",
maxWidth: 203,
error: errors.tv,
value: ""
},
{
height: 45,
label: "radio",
placeholder: "90%",
name: "radio",
maxWidth: 126,
error: errors.radio,
value: ""
},
{
height: 45,
label: "instagram",
placeholder: "90%",
name: "instagram",
maxWidth: 126,
error: errors.instagram,
value: ""
}
]);
そして入力を次のように作成します:
{formFields.map((item, index) => {
return (
<div key={index}>
<TextInput
name={item.name}
label={item.label}
height={item.height}
placeholder={item.placeholder}
error={item.error}
value={item.value}
inputRef={register({
required: true
})}
onChange={fieldOnChange(index)}
/>
{item.error && <span>Enter a valide value</span>}
</div>
);
})}
デモ を確認できます
何か助けてください?
これは、useStateでformFieldsを使用しているためです。一度だけ実行されます。エラー値、つまり最初の初期値をすでにキャプチャしていることを示します。エラー値の変更を追跡するには、useEffectを使用するか、item.errorの状態を直接エラーに変更する必要があります。
react-hook-form
はエラーを検証に使用します。
{errors[item.name] && <span>Enter a valid value</span>}
ここにデモリンクがあります: https://codesandbox.io/s/blue-shape-pv8jf