防止非回车键触发提交功能

Question

我正在使用反应组件系统（mantine）。我有一个选择字段，我想使用任意键选择一个选项，然后仅使用回车键提交。

现在的问题是，一旦出现下拉列表并且我按任意键，它就会调用该函数并发送我设置的空字符串。如果表单中没有提交按钮，onSubmit 将无法工作，将显示设置为没有仍然无法提交。所以，我就得到了这个结果。

import React, { useState, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { Text, Select } from "@mantine/core";
import { Icon } from "@iconify/react";
import axios from "axios";
import { api } from "../helpers/api";

const Home = () => {
  const [joblist, setJoblist] = React.useState("");
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const history = useNavigate();
  const selectForm = useRef(null);
  function handleSubmit(e) {
    if (e.key === "Enter" && e.preventDefault()) {
      selectForm.current.submit();
    }

    setJoblist("");
    console.log(joblist);
    setLoading(true);
    const uu = {
      jobs: joblist,
    };
    console.log(uu);
    console.log(api.jobs);
    fetch(api.jobs, {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "http://127.0.0.1:8000/",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(uu),
    })
      .then((res) => {
        console.log(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
        setError(err.message || err);
      });
  }

  return (
    <div>
    
      <form ref={selectForm} onKeyDown={handleSubmit}>
        <Select
          label="Your favorite framework/library"
          placeholder="Pick one"
          searchable
          clearable
          nothingFound="No options"
          value={joblist}
          onChange={setJoblist}
          data={[
            { value: "react", label: "React" },
            { value: "ng", label: "Angular" },
            { value: "svelte", label: "Svelte" },
            { value: "vue", label: "Vue" },
          ]}
          style={{
            width: "608px",
            marginLeft: "294px",
            marginTop: "-100px",
          }}
        />
      </form>
    </div>
  );
};

export default Home;

Answer 1

当

if (e.key === "Enter" && e.preventDefault()) {
  selectForm.current.submit();
}

e.key === "Enter" 为 false 时，条件评估将立即停止。
所以尝试一下：

e.preventDefault()
if (e.key === "Enter") {
  selectForm.current.submit();
}

你可能需要这个来阻止执行代码的其余部分（但这还不清楚......）

else {
  return
}