面臨使用 React-Hook-Forms 使驗證類自動反映在自定義日期選擇器 Flatpickr 上的挑戰，
const { register, handleSubmit, errors, control } = useForm({
mode: 'onChange'
})
<FormGroup>
<Controller
name="dateControl"
control={control}
defaultValue={null}
rules={{ required: true }}
render={({ value, onChange }) => (
<Flatpickr
value={value}
onChange={onChange}
id="hf-picker"
options={{
altInput: true,
altFormat: 'F j, Y',
dateFormat: 'Y-m-d',
altInputClass: classnames(
'form-control flatpickr-input',
{
'is-invalid': errors.dateControl && true
}
)
}}
/>
)}
/>
</FormGroup>
故障排除后，我意識到一切正常，除了每當 react-hooks-form 更新驗證錯誤時組件無法重新渲染，無論如何我可以強制手動重新渲染，謝謝
uj5u.com熱心網友回復：
我認為這與 RHF 無關，但不知何故，當配置更改時，組件的optionsprop<Flatpickr />不會更新。
我假設您使用該react-flatpickr包 - 您可以做的只是將key道具傳遞給該組件并將其設定為該控制元件的錯誤物件。每次該表單控制元件的錯誤發生變化時，這將強制重新渲染。
const isNotEmpty = (array) => array?.length > 0 || "Required";
<Controller
name="dateControl"
control={control}
defaultValue={null}
rules={{ validate: isNotEmpty }}
render={({ value, onChange }) => (
<>
<Flatpickr
key={errors.dateControl}
value={value}
onChange={onChange}
id="hf-picker"
options={{
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
altInputClass: classnames("form-control flatpickr-input", {
"is-invalid": !!errors.dateControl
})
}}
/>
{errors.dateControl && <p>{errors.dateControl.message}</p>}
</>
)}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/337054.html