Wie sende ich ein Formular mit der Eingabetaste in react.js?

101

Hier ist mein Formular und die onClick-Methode. Ich möchte diese Methode ausführen, wenn die Eingabetaste der Tastatur gedrückt wird. Wie ?

NB: Keine Anfrage wird geschätzt.

 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>
Istiak Morsalin
quelle

Antworten:

189

Wechseln Sie <button type="button"zu <button type="submit". Entfernen Sie die onClick. Stattdessen tun <form className="commentForm" onSubmit={this.onFormSubmit}>. Dies sollte sich durch Klicken auf die Schaltfläche und Drücken der Eingabetaste abfangen.

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>
Dominic
quelle
2
warum onSubmit = {this.onCommentSubmit}>? @Dominic
Istiak Morsalin
1
@JasonBourne Sie können dem Rückruf einen beliebigen Namen geben. Ich gebe nur immer Namen für Ereignisrückrufe wie onSomethingClick, onMouseMove, onFormKeyPress usw., anstatt die Methode basierend auf dem zu benennen, was darin enthalten sein soll, da sich dies manchmal ändert oder sich in befindet eine andere Methode (testbarer)
Dominic
2
@ JasonBourne Dies ist die richtige und bewährte Methode und funktioniert in beiden Fällen, siehe jsfiddle.net/ferahl/b125o4z0
Dominic
24
In onCommentSubmitsollten Sie auch anrufen event.preventDefault()und event.stopPropagation()verhindern, dass das Formular die Seite neu action
lädt
1
Vermeiden Sie das erneute Laden von Seiten mit einem action='#'Attribut für das formElement.
Terje Norderhaug
17

Verwenden Sie dazu das keydownEreignis:

   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>
      );
    }
am0wa
quelle
14

Es ist einige Jahre her, seit diese Frage das letzte Mal beantwortet wurde. React führte bereits 2017 "Hooks" ein und "keyCode" wurde veraltet.

Jetzt können wir folgendes schreiben:

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

Dies registriert einen Listener für das keydownEreignis, wenn die Komponente zum ersten Mal geladen wird. Der Ereignis-Listener wird entfernt, wenn die Komponente zerstört wird.

user1032613
quelle
aber sie haben die onKeyDown-Requisite auf den Dokumenten? reactjs.org/docs/events.html#keyboard-events
Cyrus Zei
@CyrusZei Key down wird noch verwendet. Ich meinte keyCodeist veraltet, kein keydownEreignis.
user1032613
ahh, dann verstehe ich, entschuldige das Missverständnis
Cyrus Zei
9

So machen Sie es, wenn Sie auf die Eingabetaste warten möchten. Es gibt eine onKeydown-Requisite, die Sie verwenden können und die Sie im Reaktionsdokument lesen können

und hier ist eine codeSandbox

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>
);
}
Cyrus Zei
quelle