Jak wysłać formularz za pomocą klawisza Enter w pliku act.js?

Oto mój formularz i metoda onClick. Chciałbym wykonać tę metodę po naciśnięciu klawisza Enter na klawiaturze. W jaki sposób ?

Uwaga: jQuery nie jest mile widziane.

 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>

Zmień <button type="button"na <button type="submit". Usuń onClick. Zamiast tego zrób <form className="commentForm" onSubmit={this.onFormSubmit}>. Powinno to złapać kliknięcie przycisku i naciśnięcie klawisza powrotu.

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>

Użyj keydownzdarzenia, aby to zrobić:

   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>
      );
    }

Od ostatniej odpowiedzi na to pytanie minęło sporo lat. React wprowadził „hooki” w 2017 roku, a „keyCode” stał się przestarzały.

Teraz możemy napisać to:

  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);
    };
  }, []);

Powoduje to rejestrację detektora na keydownzdarzenie, gdy składnik jest ładowany po raz pierwszy. Usuwa detektor zdarzeń, gdy składnik zostanie zniszczony.

tak to robisz, jeśli chcesz nasłuchiwać klawisza „Enter”. Istnieje rekwizyt onKeydown, z którego możesz skorzystać i możesz o nim przeczytać w dokumencie react

a oto kodSandbox

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>
);
}