Website-Suche

javascript - das onChange-Ereignis nach Drücken der Eingabetaste aufrufen

Ich bin neu bei Bootstrap und stecke bei diesem Problem fest. Ich habe ein Eingabefeld und sobald ich nur eine Ziffer eingebe, wird die Funktion von onChange aufgerufen, aber ich möchte, dass sie aufgerufen wird, wenn ich 'Enter' drücke, nachdem die ganze Zahl eingegeben wurde. Dasselbe Problem gibt es bei der Validierungsfunktion - sie wird zu früh aufgerufen.

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
  //bsStyle: this.validationInputFactor(),
  placeholder: this.initialFactor,
  className: "input-block-level",
  onChange: this.handleInput,
  block: true,
  addonBefore: '%',
  ref:'input',
  hasFeedback: true
});

Antwort #1

Laut der React-Dokumentation können Sie auf Tastaturereignisse wie onKeyPress oder onKeyUp hören, nicht auf onChange.

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

Aktualisierung: Verwenden Sie React.Component

Hier ist der Code, der React.Component verwendet und dasselbe tut

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

Hier ist das jsfiddle.

Update 2: Verwenden Sie eine funktionale Komponente

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

Antwort #2

Sie können onKeyPress direkt auf dem Eingabefeld verwenden. Die onChange-Funktion ändert den Zustandswert bei jeder Änderung des Eingabefeldes und nachdem die Eingabetaste gedrückt wurde, wird sie eine Funktion search() aufrufen.

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

Antwort #3

Das Drücken von Enter in einem Formularelement (Input) löst normalerweise ein submit (onSubmit)-Ereignis im Formular aus. Dabei kann man dies auf diese Weise handhaben (eine Submit-Schaltfläche ist optional, wenn nur ein Input vorhanden ist):

const { useState } = React;

function App() {
  const [text, setText] = useState("");
  const [submitted, setSubmitted] = useState('');

  function handleChange(e) {
    setText(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    setSubmitted(text);
    setText("");
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={text} onChange={handleChange} />
        <input type="submit" value="add" />
      </form>
      submitted: {submitted}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://unpkg.com/[email /umd/react.development.js"></script>
<script src="https://unpkg.com/[email /umd/react-dom.development.js"></script>
<div id="root"></div>

Die implizite Formularübermittlung (submit-Ereignis bei Enter) erfolgt, wenn:

  • Es gibt einen Absenden-Button
  • Es gibt keine Absende-Schaltflächen, aber es gibt nur eine Eingabe.

Mehr darüber hier.

Alternativ könnten Sie Ihren Handler an das blur (onBlur) Ereignis des input binden, das auftritt, wenn der Fokus entfernt wird (z. B. beim Tabben zum nächsten Element, das den Fokus erhalten kann).

Antwort #4

Sie können event.key verwenden

function Input({onKeyPress}) {
  return (
    <div>
      <h2>Input</h2>
      <input type="text" onKeyPress={onKeyPress}/>
    </div>
  )
}

class Form extends React.Component {
  state = {value:""}

  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.setState({value:e.target.value})
    }
  }

  render() {
    return (
      <section>
        <Input onKeyPress={this.handleKeyPress}/>
        <br/>
        <output>{this.state.value}</output>
      </section>
    );
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById("react")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Antwort #5

Ich bevorzuge onKeyUp, da es nur ausgelöst wird, wenn die Taste losgelassen wird. onKeyDown hingegen wird mehrmals ausgelöst, wenn der Benutzer aus irgendeinem Grund die Taste gedrückt hält. Zum Beispiel, wenn man darauf hört, dass die Enter-Taste "gedrückt" wird, um eine Netzwerkanfrage zu machen, möchte man nicht, dass dies mehrmals ausgelöst wird, da es teuer sein kann.

// handler could be passed as a prop
<input type="text" onKeyUp={handleKeyPress} />

handleKeyPress(e) {
  if (e.key === 'Enter') {
    // do whatever
  }
}

Vermeiden Sie also keyCode, da es irgendwann veraltet sein wird.

Verwandte Artikel