Làm cách nào để gửi biểu mẫu bằng cách sử dụng phím Enter trong react.js?

Đây là biểu mẫu của tôi và phương pháp onClick. Tôi muốn thực hiện phương pháp này khi nhấn nút Enter trên bàn phím. Làm sao ?

NB: Không có jquery nào được đánh giá cao.

 comment: function (e) {
        e.preventDefault();
        this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value})
    },


 <form className="commentForm">
     <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text"  /><br />
    <input type="text" placeholder="userPostId" ref="userPostId" /> <br />
     <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
    </form>

Thay đổi <button type="button"thành <button type="submit". Loại bỏ onClick. Thay vào đó hãy làm <form className="commentForm" onSubmit={this.onFormSubmit}>. Thao tác này sẽ bắt khi nhấp vào nút và nhấn phím quay lại.

onFormSubmit = e => {
  e.preventDefault();
  const { name, email } = this.state;
  // send to server with e.g. `window.fetch`
}

...

<form onSubmit={this.onFormSubmit}>
  ...
  <button type="submit">Submit</button>
</form>

Sử dụng keydownsự kiện để làm điều đó:

   input: HTMLDivElement | null = null;

   onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
      // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
      if (event.key === 'Enter') {
        event.preventDefault();
        event.stopPropagation();
        this.onSubmit();
      }
    }

    onSubmit = (): void => {
      if (input.textContent) {
         this.props.onSubmit(input.textContent);
         input.focus();
         input.textContent = '';
      }
    }

    render() {
      return (
         <form className="commentForm">
           <input
             className="comment-input"
             aria-multiline="true"
             role="textbox"
             contentEditable={true}
             onKeyDown={this.onKeyDown}
             ref={node => this.input = node} 
           />
           <button type="button" className="btn btn-success" onClick={this.onSubmit}>Comment</button>
         </form>
      );
    }

Đã khá nhiều năm kể từ khi câu hỏi này được trả lời lần cuối. React đã giới thiệu "Hooks" vào năm 2017 và "keyCode" đã không còn được dùng nữa.

Bây giờ chúng ta có thể viết điều này:

  useEffect(() => {
    const listener = event => {
      if (event.code === "Enter" || event.code === "NumpadEnter") {
        console.log("Enter key was pressed. Run your function.");
        // callMyFunction();
      }
    };
    document.addEventListener("keydown", listener);
    return () => {
      document.removeEventListener("keydown", listener);
    };
  }, []);

Điều này đăng ký một trình nghe trên keydownsự kiện, khi thành phần được tải lần đầu tiên. Nó loại bỏ trình nghe sự kiện khi thành phần bị phá hủy.

đây là cách bạn thực hiện nếu bạn muốn nghe phím "Enter". Có một phần mềm hỗ trợ onKeydown mà bạn có thể sử dụng và bạn có thể đọc về nó trong tài liệu phản ứng

và đây là một hộp mã

const App = () => {
    const something=(event)=> {
        if (event.keyCode === 13) {
            console.log('enter')
        }
    }
return (
    <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <input  type='text' onKeyDown={(e) => something(e) }/>
    </div>
);
}