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

Question

我想在输入时提交我的表单而不在 Antd 表单中添加按钮。有没有办法在 React 中做到这一点？我想解决方法只是隐藏按钮，但不认为这将是最好的方法。

Answer 1

1. 在你的组件中存储antd Form 的ref （用于访问提交方法）

2. 添加onKeyUp到表格

3. tabIndex={0}如果你想 onKeyUp 在整个表单上工作而不仅仅是输入，你需要添加到表单

4. 输入 keyCode 为 13，因此您需要像这样处理 KeyUp：

const SimpleForm = () => {

  const ref = useRef();

  function handleKeyUp(event) {

    // Enter

    if (event.keyCode === 13) {

      ref.current.submit();

    }

  }

  return (

    <Form ref={ref} onKeyUp={handleKeyUp} tabIndex={0}>

      <Form.Item

        label="Username"

        name="username"

        rules={[

          {

            required: true,

            message: "Please input your username!"

          }

        ]}

      >

        <Input />

      </Form.Item>

      <Form.Item

        label="Password"

        name="password"

        rules={[

          {

            required: true,

            message: "Please input your password!"

          }

        ]}

      >

        <Input.Password />

      </Form.Item>

    </Form>

  );

};

或者您可以像这样在窗口上收听 keyup 事件：

const SimpleForm = () => {

 const ref = useRef();

  function handleKeyUp(event) {

    if (event.keyCode === 13) {

      ref.current.submit();

    }

  }

  useEffect(() => {

    window.addEventListener("keyup", handleKeyUp);

    return () => {

      window.removeEventListener("keyup", handleKeyUp);

    };

  }, []);

  return (

    <Form ref={ref}>

    .

    .

    .

  );

};

Answer 2

onSubmit在 antd v4 中不可用。改用onKeyPress。

<Form

  form={form}

  onFinish={console.log}

  onKeyPress={(e) => {

    if (e.key === "Enter") {

      form.submit();

    }

  }}

>

    //

</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 {

  constructor() {

    super();

    this.state = {}

    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleSubmit(e) {

    e.preventDefault();

    //your code

  }

  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        //form code

        // Hide this button using CSS

       <button type="submit">Submit</button>

      </form>

    );

  }

也许这会奏效。默认情况下，提交按钮在 catches enter键中，所以你不必做任何激进的事情，只需在表单中放置一个提交按钮并隐藏该按钮，在回车键上它会自动提交表单。

Answer 5

你应该在你的输入中使用 onKeyUp 道具

const handleSubmit = () => {

// function body for submitting data

}

<input

  onKeyUp={(ev) => {

              if (ev.keyCode === 13) {

                handleSubmit();

              }

            }}

/>

<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>