react功能组件表单组件onSubmit处理程序不工作

Question

这是我的react函数组件

import "./styles.css";
import { Form, Button } from "antd";
export default function App() {
const hello = () => {
console.log("enter");
};
return (
<div className="App">
<Form onSubmit={hello}>
<Form.Item>
<Button type="primary" htmlType="submit">
Apply
</Button>
</Form.Item>
</Form>
</div>
);
}

当用户按下应用按钮时，我试图调用该函数，但没有显示任何内容。我哪里做错了?

这是我的codesandbox

Answer 1

问题是onSubmit根据antd文件应该是onFinish

代码如下:

import "./styles.css";
import { Form, Button } from "antd";
export default function App() {
const hello = () => {
console.log("enter");
};
return (
<div className="App">
<Form onFinish={hello}>
<Form.Item>
<Button type="primary" htmlType="submit">
Apply
</Button>
</Form.Item>
</Form>
</div>
);
}

Answer 2

根据and文档，Forms onFinish是提交回调的标识符，而不是onSubmit。所以你可以使用:

<Form onFinish={hello}>