Cntrl S提交一份在反应中的JS但输入字段不工作

Question

//当我试图用ctrl求和a时，它会提交，但问题是输入字段，而不是work //当我评论onKeyDown输入字段时，我无法使用ctrl S提交表单

const [value, setValue] = useState("");
    const [contentEdit, setContentEdit] = useState(false);

    const handleChange = e => {
        setValue(e.target.value);
        console.log(e.target.value);
        setContentEdit(false);
    };


    const handleSubmit = e => {
        e.preventDefault();
        alert("you have searched for - " + value);
        // or you can send to backend
        setValue("");
    };

    const handleKeypress = event => {
        event.preventDefault();
        let charCode = String.fromCharCode(event.which).toLowerCase();
        if ((event.ctrlKey || event.metaKey) && charCode === 's') {
            console.log("CTRL+S Pressed");
            alert("CTRL+S Pressed");
            // onSubmitMemo();
            handleSubmit();
        }
    };

 <div
            onKeyDown={handleKeypress}
            contentEditable={true}
            className='border border-3 border-info'>
            <h1>Hello Ctrl + S to Submit</h1>
            <div>
                <input type="text" name="email"
                    onChange={handleChange}
                />
                <input type="text" name="name"
                    onChange={handleChange}
                />
                <button type="submit" onClick={handleSubmit}>+</button>
            </div>
        </div>

Answer 1

我已经尝试了你的代码，没有Ctrl +S--它工作得很好。但是，如果将contentEditable={true}道具插入div，则无法工作。但我已经帮你实现了。你可以把这个转过来。

import React from "react";
export default function App() {
  const [value, setValue] = React.useState("");
  const [name, setName] = React.useState("");

  console.log(value, name);

  const handleSubmit = (e) => {
    alert("you have searched for - " + value);
    // or you can send to backend
    setValue("");
    setName("");
  };

  const handleKeypress = (event) => {
    let charCode = String.fromCharCode(event.which).toLowerCase();
    if (event.ctrlKey && charCode === "s") {
      console.log("CTRL+S Pressed");
      alert("CTRL+S Pressed");
      // onSubmitMemo();
      handleSubmit();
    }
  };

  return (
    <div
      onKeyDown={(e) => handleKeypress(e)}
      className="border border-3 border-info"
    >
      <h1>Hello Ctrl + S to Submit</h1>
      <div>
        <form onSubmit={(e) => handleSubmit(e)}>
          <input
            type="text"
            name="email"
            onChange={(e) => setValue(e.target.value)}
            value={value}
          />
          <input
            type="text"
            name="name"
            onChange={(e) => setName(e.target.value)}
            value={name}
          />
          <button type="submit" onClick={handleSubmit}>
            +
          </button>
        </form>
      </div>
    </div>
  );
}