Reagiere auf Benutzer, hier ist eine Antwort der Vollständigkeit halber.
Reagiere auf Version 16.4.2
Sie möchten entweder für jeden Tastendruck aktualisieren oder den Wert nur beim Senden abrufen. Das Hinzufügen der Schlüsselereignisse zur Komponente funktioniert, es gibt jedoch Alternativen, wie in den offiziellen Dokumenten empfohlen.
Kontrollierte vs unkontrollierte Komponenten
Kontrolliert
Aus den Dokumenten - Formulare und kontrollierte Komponenten :
In HTML behalten Formularelemente wie Eingabe, Textbereich und Auswahl normalerweise ihren eigenen Status bei und aktualisieren ihn basierend auf Benutzereingaben. In React wird der veränderbare Status normalerweise in der Eigenschaft state von Komponenten gespeichert und nur mit setState () aktualisiert.
Wir können beides kombinieren, indem wir den Reaktionszustand zur „einzigen Quelle der Wahrheit“ machen. Dann steuert die React-Komponente, die ein Formular rendert, auch, was in diesem Formular bei nachfolgenden Benutzereingaben geschieht. Ein Eingabeformularelement, dessen Wert auf diese Weise von React gesteuert wird, wird als "gesteuerte Komponente" bezeichnet.
Wenn Sie eine gesteuerte Komponente verwenden, müssen Sie den Status für jede Änderung des Werts auf dem neuesten Stand halten. Dazu binden Sie einen Ereignishandler an die Komponente. In den Beispielen der Dokumente normalerweise das Ereignis onChange.
Beispiel:
1) Binden Sie den Ereignishandler im Konstruktor (Wert im Status beibehalten).
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Handlerfunktion erstellen
handleChange(event) {
this.setState({value: event.target.value});
}
3) Formularübermittlungsfunktion erstellen (Wert wird aus dem Status übernommen)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Rendern
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Wenn Sie gesteuerte Komponenten verwenden, wird Ihre handleChangeFunktion immer ausgelöst, um den ordnungsgemäßen Status zu aktualisieren und beizubehalten. Der Status hat immer den aktualisierten Wert, und wenn das Formular gesendet wird, wird der Wert dem Status entnommen. Dies kann ein Nachteil sein, wenn Ihr Formular sehr lang ist, da Sie für jede Komponente eine Funktion erstellen oder eine einfache Funktion schreiben müssen, die die Wertänderung jeder Komponente behandelt.
Unkontrolliert
Aus der Komponente Docs - Uncontrolled
In den meisten Fällen empfehlen wir die Verwendung kontrollierter Komponenten zur Implementierung von Formularen. In einer gesteuerten Komponente werden Formulardaten von einer React-Komponente verarbeitet. Die Alternative sind unkontrollierte Komponenten, bei denen Formulardaten vom DOM selbst verarbeitet werden.
Um eine unkontrollierte Komponente zu schreiben, können Sie anstelle eines Ereignishandlers für jede Statusaktualisierung einen Verweis verwenden, um Formularwerte aus dem DOM abzurufen.
Der Hauptunterschied besteht darin, dass Sie nicht die onChangeFunktion, sondern onSubmitdas Formular verwenden, um die Werte abzurufen und bei Bedarf zu überprüfen.
Beispiel:
1) Binden Sie den Ereignishandler und erstellen Sie eine Referenz für die Eingabe im Konstruktor (kein Wert wird beibehalten)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Formularübermittlungsfunktion erstellen (Wert wird aus der DOM-Komponente übernommen)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Rendern
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Wenn Sie unkontrollierte Komponenten verwenden, müssen Sie keine handleChangeFunktion binden . Wenn das Formular gesendet wird, wird der Wert aus dem DOM übernommen und die erforderlichen Validierungen können an dieser Stelle erfolgen. Es müssen auch keine Handlerfunktionen für eine der Eingabekomponenten erstellt werden.
Ihr Problem
Nun zu Ihrem Problem:
... Ich möchte, dass es aufgerufen wird, wenn ich die Eingabetaste drücke, wenn die ganze Nummer eingegeben wurde
Wenn Sie dies erreichen möchten, verwenden Sie eine unkontrollierte Komponente. Erstellen Sie keine onChange-Handler, wenn dies nicht erforderlich ist. Der enterSchlüssel sendet das Formular und die handleSubmitFunktion wird ausgelöst.
Änderungen, die Sie vornehmen müssen:
Entfernen Sie den onChange-Aufruf in Ihrem Element
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
});
Behandeln Sie das Formular senden und validieren Sie Ihre Eingabe. Sie müssen den Wert von Ihrem Element in der Formularübermittlungsfunktion abrufen und dann validieren. Stellen Sie sicher, dass Sie den Verweis auf Ihr Element im Konstruktor erstellen.
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
Beispiel für die Verwendung einer unkontrollierten Komponente:
class NameForm extends React.Component {
constructor(props) {
super(props);
// bind submit function
this.handleSubmit = this.handleSubmit.bind(this);
// create reference to input field
this.input = React.createRef();
}
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
console.log('value in input field: ' + value );
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
onBlurEreignis binden .