如何在没有提交按钮的情况下提交表单？

Question

我想在输入时提交我的表单而不在 Antd 表单中添加按钮。有没有办法在 React 中做到这一点？

我想解决方法只是隐藏按钮，但不认为这将是最好的方法。

Answer 1

在你的组件中存储antd Form 的ref （用于访问提交方法）添加onKeyUp到表格tabIndex={0}如果你想 onKeyUp 在整个表单上工作而不仅仅是输入，你需要添加到表单输入 keyCode 为 13，因此您需要像这样处理 KeyUp：const SimpleForm = () => {&nbsp; const ref = useRef();&nbsp; function handleKeyUp(event) {&nbsp; &nbsp; // Enter&nbsp; &nbsp; if (event.keyCode === 13) {&nbsp; &nbsp; &nbsp; ref.current.submit();&nbsp; &nbsp; }&nbsp; }&nbsp; return (&nbsp; &nbsp; <Form ref={ref} onKeyUp={handleKeyUp} tabIndex={0}>&nbsp; &nbsp; &nbsp; <Form.Item&nbsp; &nbsp; &nbsp; &nbsp; label="Username"&nbsp; &nbsp; &nbsp; &nbsp; name="username"&nbsp; &nbsp; &nbsp; &nbsp; rules={[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: "Please input your username!"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <Input />&nbsp; &nbsp; &nbsp; </Form.Item>&nbsp; &nbsp; &nbsp; <Form.Item&nbsp; &nbsp; &nbsp; &nbsp; label="Password"&nbsp; &nbsp; &nbsp; &nbsp; name="password"&nbsp; &nbsp; &nbsp; &nbsp; rules={[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: "Please input your password!"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <Input.Password />&nbsp; &nbsp; &nbsp; </Form.Item>&nbsp; &nbsp; </Form>&nbsp; );};或者您可以像这样在窗口上收听 keyup 事件：const SimpleForm = () => {&nbsp;const ref = useRef();&nbsp; function handleKeyUp(event) {&nbsp; &nbsp; if (event.keyCode === 13) {&nbsp; &nbsp; &nbsp; ref.current.submit();&nbsp; &nbsp; }&nbsp; }&nbsp; useEffect(() => {&nbsp; &nbsp; window.addEventListener("keyup", handleKeyUp);&nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; window.removeEventListener("keyup", handleKeyUp);&nbsp; &nbsp; };&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <Form ref={ref}>&nbsp; &nbsp; .&nbsp; &nbsp; .&nbsp; &nbsp; .&nbsp; );};

Answer 2

onSubmit在 antd v4 中不可用。改用onKeyPress。<Form&nbsp; form={form}&nbsp; onFinish={console.log}&nbsp; onKeyPress={(e) => {&nbsp; &nbsp; if (e.key === "Enter") {&nbsp; &nbsp; &nbsp; form.submit();&nbsp; &nbsp; }&nbsp; }}>&nbsp; &nbsp; //</Form>

Answer 3

既然你提到了 React，下面的代码应该在按下时提交表单enter。诀窍是将 onSubmit 属性添加到表单标签。export default class Module extends React.Component {  constructor() {    super();    this.state = {}    this.handleSubmit = this.handleSubmit.bind(this);  }  handleSubmit(e) {    e.preventDefault();    //your code  }  render() {    return (      <form onSubmit={this.handleSubmit}>        //form code      </form>    );  }}

Answer 4

export default class Module extends React.Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {}&nbsp; &nbsp; this.handleSubmit = this.handleSubmit.bind(this);&nbsp; }&nbsp; handleSubmit(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; //your code&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <form onSubmit={this.handleSubmit}>&nbsp; &nbsp; &nbsp; &nbsp; //form code&nbsp; &nbsp; &nbsp; &nbsp; // Hide this button using CSS&nbsp; &nbsp; &nbsp; &nbsp;<button type="submit">Submit</button>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; );&nbsp; }也许这会奏效。默认情况下，提交按钮在 catches enter键中，所以你不必做任何激进的事情，只需在表单中放置一个提交按钮并隐藏该按钮，在回车键上它会自动提交表单。

Answer 5

你应该在你的输入中使用 onKeyUp 道具const handleSubmit = () => {// function body for submitting data}<input&nbsp; onKeyUp={(ev) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (ev.keyCode === 13) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleSubmit();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}/><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>