Reakcja użytkowników, oto odpowiedź na kompletność.
Wersja React 16.4.2
Albo chcesz aktualizować za każdym naciśnięciem klawisza, albo uzyskaj wartość tylko przy wysyłaniu. Dodanie kluczowych zdarzeń do komponentu działa, ale istnieją alternatywne rozwiązania zalecane w oficjalnych dokumentach.
Kontrolowane a niekontrolowane komponenty
Kontrolowane
Z Dokumentów - formularze i kontrolowane komponenty :
W HTML formuj elementy, takie jak input, textarea i select, zwykle zachowują własny stan i aktualizują go na podstawie danych wprowadzonych przez użytkownika. W React stan mutable jest zwykle utrzymywany we właściwości state składników i aktualizowany tylko za pomocą setState ().
Możemy połączyć te dwa elementy, czyniąc stan React „jedynym źródłem prawdy”. Następnie komponent React, który renderuje formularz, kontroluje również to, co dzieje się w tej formie podczas wprowadzania danych przez użytkownika. Element formularza wejściowego, którego wartość jest kontrolowana w ten sposób przez React, nazywany jest „komponentem kontrolowanym”.
Jeśli używasz kontrolowanego komponentu, będziesz musiał aktualizować stan dla każdej zmiany wartości. Aby tak się stało, należy powiązać moduł obsługi zdarzeń ze składnikiem. W przykładach dokumentów zwykle zdarzenie onChange.
Przykład:
1) Obsługa zdarzenia powiązania w konstruktorze (wartość zachowana w stanie)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Utwórz funkcję modułu obsługi
handleChange(event) {
this.setState({value: event.target.value});
}
3) Utwórz funkcję przesyłania formularza (wartość pochodzi ze stanu)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Renderuj
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Jeśli używasz kontrolowanych komponentów, twoja handleChangefunkcja będzie zawsze uruchamiana w celu aktualizacji i utrzymania właściwego stanu. Stan zawsze będzie miał zaktualizowaną wartość, a po przesłaniu formularza wartość zostanie pobrana ze stanu. Może to być oszustwem, jeśli twoja forma jest bardzo długa, ponieważ będziesz musiał utworzyć funkcję dla każdego komponentu lub napisać prostą, która będzie obsługiwać zmianę wartości każdego komponentu.
Niekontrolowane
Z Dokumentów - niekontrolowany komponent
W większości przypadków zalecamy stosowanie kontrolowanych komponentów do implementacji formularzy. W kontrolowanym komponencie dane formularza są obsługiwane przez komponent React. Alternatywą są niekontrolowane komponenty, w których dane formularza są obsługiwane przez sam DOM.
Aby napisać niekontrolowany komponent, zamiast pisać moduł obsługi zdarzeń dla każdej aktualizacji stanu, możesz użyć polecenia ref, aby uzyskać wartości formularza z DOM.
Główną różnicą tutaj jest to, że nie używasz onChangefunkcji, ale onSubmitformę, aby uzyskać wartości i zweryfikować, jeśli to konieczne.
Przykład:
1) Powiązanie modułu obsługi zdarzeń i utworzenie referencji w celu wprowadzenia do konstruktora (brak wartości w stanie)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Utwórz funkcję przesyłania formularza (wartość pochodzi z komponentu DOM)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Renderuj
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Jeśli używasz niekontrolowanych komponentów, nie ma potrzeby wiązania handleChangefunkcji. Po przesłaniu formularza wartość zostanie pobrana z modelu DOM i w tym momencie mogą wystąpić niezbędne weryfikacje. Nie trzeba też tworzyć żadnych funkcji obsługi dla żadnego z komponentów wejściowych.
Twój problem
Teraz dla twojego problemu:
... Chcę, aby został wywołany po naciśnięciu klawisza Enter po wprowadzeniu całego numeru
Jeśli chcesz to osiągnąć, użyj niekontrolowanego komponentu. Nie twórz programów obsługi onChange, jeśli nie jest to konieczne. enterKlucz będzie przesłać formularz, a handleSubmitfunkcja zostanie zwolniony.
Zmiany, które musisz wykonać:
Usuń wywołanie onChange w swoim elemencie
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
});
Obsługuj formularz prześlij i sprawdź poprawność wprowadzonych danych. Musisz pobrać wartość ze swojego elementu w funkcji przesyłania formularza, a następnie sprawdzić poprawność. Upewnij się, że utworzyłeś odniesienie do swojego elementu w konstruktorze.
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
}
Przykładowe zastosowanie niekontrolowanego komponentu:
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')
);
onBlurzdarzeniem.