在React中,可以使用onSubmit
事件来处理表单的提交,而不需要使用按钮来触发提交。下面是一个示例代码:
import React, { useState } from "react";
function ExampleForm() {
const [formData, setFormData] = useState({
username: "",
password: ""
});
const handleSubmit = (event) => {
event.preventDefault();
// 执行表单提交的逻辑
console.log("Form submitted:", formData);
};
const handleChange = (event) => {
setFormData({
...formData,
[event.target.name]: event.target.value
});
};
return (
);
}
export default ExampleForm;
在上面的代码中,handleSubmit
函数被绑定到表单的onSubmit
事件上,当用户提交表单时,该函数会被调用。handleChange
函数用于更新表单数据的状态。
注意,在中,我们添加了
style={{ display: "none" }}
来隐藏提交按钮,因为我们不需要显示一个可见的按钮来提交表单。实际上,表单的提交将通过按下Enter键或者其他方式来触发。