AntDesignのonValuesChange
解決したいこと
フォームの値を動的に変更させたときにFormnoonValuesChangeを動かしたい
例えばこんな1つ目のinputに入力した内容を2つ目のinputにコピーするコンポーネントがあります
const DoubleInput=()=>{
const intputFiledName="field1"
const copiedFieldName="fields2"
const formInstance: FormInstance = Form.useFormInstance();
const {setFieldValue} = formInstance;
const handleChange=(event:React.ChangeEvent<HTMLInputElement> | undefined)=>{
console.log("handleChange")
setFieldValue(copiedFieldName,event?.target.value??"")
console.log({value:event?.target.value})
}
return(
<Col span={24}>
<Form.Item name={intputFiledName}>
<Input onChange={handleChange} />
</Form.Item>
<Form.Item name={copiedFieldName}>
<Input />
</Form.Item>
</Col>
)
}
これを
const DemoForm = () => {
const [form] = Form.useForm();
const onValuesChange = (changedValues:any, allValues:any) => {
console.log('Changed:', changedValues);
console.log('All:', allValues);
//TODO ちょとした処理
};
return (
<Form form={form} onValuesChange={onValuesChange}>
<DoubleInput />
</Form>
);
};
のようにonValuesChangeでハンドリングしてもonValuesChangeのallValuesに二つ目のinputの値が入っていません。
allValuesに二つ目のinputが入るようにするにはどうすればいいでしょうか?
0