我创建了以下组件以在UnForm中选择日期:
export default function DatePickerInput({ name, ...rest }) {
const datepickerRef = useRef(null);
const { fieldName, defaultValue = '', registerField } = useField(name);
const [date, setDate] = useState(defaultValue || null);
useEffect(() => {
registerField({
name: fieldName,
ref: datepickerRef.current,
path: 'props.selected',
});
}, [fieldName, registerField]);
return (
<Label htmlFor={fieldName}>
<UnInput>
<ReactDatePicker
ref={datepickerRef}
selected={date}
onChange={setDate}
dateFormat="dd/MM/yyyy"
placeholderText="dd/mm/aaaa"
writable="true"
{...rest}
/>
</UnInput>
</Label>
);
}
要保存记录,组件正在正常工作,请加载并保存我选择的日期。当我要编辑记录时,尝试以初始加载方式加载日期时,页面被打破,并显示以下错误:
Unhandled Rejection (TypeError): Cannot assign to read only property 'selected' of object '#<Object>'
如果我注释掉path: 'props.selected'
行,则在useEffect ()
中,屏幕没有损坏,但组件中未填写日期。如何运作?
问题:
[formRef.current.setFieldValue('birthday',value)
这将尝试在提供的path
上设置值,在我们的情况下,提供的路径是props.selected
。
并且props.selected
是只读属性,因此您无法在props
上设置值,因此会出错。
useEffect(() => {
registerField({
name: fieldName,
ref: datepickerRef.current,
path: 'props.selected', // <---- this is props, and it's readonly
clearValue: (ref) => {
ref.clear();
},
});
}, [fieldName, registerField]);
解决方案:
您可以删除path
并使用名为getter
和setter
的getValue
和setValue
方法:
setValue
:设置初始值或从setFieldValue
传递的任何值>
getValue
:在提交时获得价值
:useEffect(() => { registerField({ name: fieldName, ref: datepickerRef.current, clearValue: ref => { ref.clear(); }, setValue: (e, v) => { setDate(new Date(v)); // <---- Setting up default value }, getValue: () => { return datepickerRef.current.props.selected; // to get selected value from Date picker's props // OR return Date.toString(); // to get selected value from state it self } }); }, [fieldName, registerField]);
工作演示