在Form.item不单独绑定value 值和onChange方法时使用
1、Button在Form内部,加上 htmlType="submit"属性触发Form表单onFinishsh事件
import React from "react";
import { Form, Button } from "antd";
export default function Page({ route, location }) {
const [form] = Form.useForm();
const initialValues = {
input: "",
};
const handSubmit = (value) => {
console.log("Form内部触发:", value);
};
return (
<Form
style={{ margin: 40 }}
form={form}
initialValues={initialValues}
onFinish={handSubmit}
>
<Form.Item name="input">
<input />
</Form.Item>
<Button type="primary" htmlType="submit" style={{ margin: 40 }}>
提交
</Button>
</Form>
);
}
2、button在Form外,根据表单自带getFieldsValue方法获取
const getFormValue = () => {
console.log("form.getFieldsValue: ", form.getFieldsValue());
};
return (
<>
<Form
style={{ margin: 40 }}
form={form}
initialValues={initialValues}
>
<Form.Item name="input">
<input />
</Form.Item>
</Form>
<Button
type="primary"
style={{ marginLeft: 40 }}
onClick={getFormValue}
>
提交
</Button>
</>
);
3、给Form绑定id,button 设置 form=‘id’ 和 htmlType=“submit”,可在Form外部触发onFinish事件
const handSubmit = (value) => {
console.log("Form外部触发:", value);
};
return (
<>
<Form
id="form"
style={{ margin: 40 }}
form={form}
initialValues={initialValues}
onFinish={handSubmit}
>
<Form.Item name="input">
<input />
</Form.Item>
</Form>
<Button
type="primary"
style={{ marginLeft: 40 }}
form="form"
htmlType="submit"
>
提交
</Button>
</>
);