I have created a form using ant design framework, where I am dispatching one action on form submit. My issue is, that checkbox outside the form, when checkbox click I would like to call onFinish method or get the latest values of form fields, The intention is to perform same action as onFinish button,
sample UI
<div className="homepage-widget-header">
<div className="text-ellipsis">{GpsConstants.WIDGET_NAME}</div>
<Checkbox checked={isDisable} onChange={(checked) => stopSendingDataToBackend (checked)}
className="homepage-widget-checkbox text-ellipsis" >{HomepageConst.CHECKBOX_HEADER}
</Checkbox>
</div>
<div className="homepage-widget" >
<div className="gpscoordinates">
<Form
{...layout}
className="gps-coordinates-form"
onFinish={onApply}
>
<Form.Item
label={GpsConstants.LATITUDE}
name="latitude"
initialValue="25.328380"
rules={[
{
required: true,
message: 'Please enter latitude!',
},
]}
>
<InputNumber />
</Form.Item>
<Form.Item
label={GpsConstants.LONGITUDE}
name="longitude"
initialValue="51.435989"
rules={[
{
required: true,
message: 'Please enter longitude!',
},
]}
>
<InputNumber />
</Form.Item>
<Form.Item {...tailLayout} className="ant-form-item-last">
<div>
<div className="apply-coordinates">
<Button type="primary" htmlType="submit">
{GpsConstants.APPLY}
</Button>
</div>
</div>
</Form.Item>
</div>
and I have APPLY button which is being called onFinish
const onApply = (values) => {
console.log('Success:', values);
dispatch({
type: "updateGPSCoordinates",
latitude: values.latitude,
longitude: values.longitude,
altitude: values.altitude
});
};
and onChange on checkbox there is method like below
const stopSendingDataToBackend = (e) => {
setCheckBoxDisable(e.target.checked)
console.log(isDisable);
if (!isDisable) {
dispatch({
type: "stopgpsdata",
stop_sending: !isDisable,
message_type: 'GPS'
})
} else {
console.log("send latest values to backend");
// I trying to access form data inside or call onApply method here.
}
}
