Reaccionar usuarios, aquí hay una respuesta para completar.
Reaccionar versión 16.4.2
Desea actualizar para cada pulsación de tecla u obtener el valor solo al enviar. Agregar los eventos clave al componente funciona, pero hay alternativas como se recomienda en los documentos oficiales.
Componentes controlados vs no controlados
Revisado
De los Documentos - Formularios y componentes controlados :
En HTML, los elementos de formulario como input, textarea y select normalmente mantienen su propio estado y lo actualizan según la entrada del usuario. En React, el estado mutable generalmente se mantiene en la propiedad de estado de los componentes y solo se actualiza con setState ().
Podemos combinar los dos haciendo que el estado React sea la "fuente única de verdad". Luego, el componente React que representa un formulario también controla lo que sucede en ese formulario en la entrada posterior del usuario. Un elemento de formulario de entrada cuyo valor es controlado por React de esta manera se denomina "componente controlado".
Si utiliza un componente controlado, deberá mantener actualizado el estado para cada cambio en el valor. Para que esto suceda, debe vincular un controlador de eventos al componente. En los ejemplos de los documentos, generalmente el evento onChange.
Ejemplo:
1) Enlazar controlador de eventos en el constructor (valor mantenido en estado)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Crear función de controlador
handleChange(event) {
this.setState({value: event.target.value});
}
3) Crear función de envío de formulario (el valor se toma del estado)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Renderizar
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Si usa componentes controlados , suhandleChange función siempre se activará para actualizar y mantener el estado correcto. El estado siempre tendrá el valor actualizado, y cuando se envíe el formulario, el valor se tomará del estado. Esto podría ser una estafa si su formulario es muy largo, porque tendrá que crear una función para cada componente, o escribir una simple que maneje el cambio de valor de cada componente.
Sin control
De los documentos: componente no controlado
En la mayoría de los casos, recomendamos utilizar componentes controlados para implementar formularios. En un componente controlado, los datos del formulario son manejados por un componente React. La alternativa son los componentes no controlados, donde los datos del formulario son manejados por el propio DOM.
Para escribir un componente no controlado, en lugar de escribir un controlador de eventos para cada actualización de estado, puede usar una referencia para obtener valores de formulario del DOM.
La principal diferencia aquí es que no utiliza la onChangefunción, sino más bienonSubmit el formulario para obtener los valores y validar si es necesario.
Ejemplo:
1) Enlazar controlador de eventos y crear referencia a entrada en constructor (no se mantiene ningún valor en estado)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Crear función de envío de formulario (el valor se toma del componente DOM)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Renderizar
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Si utiliza componentes no controlados , no es necesario vincular una handleChangefunción. Cuando se envía el formulario, el valor se tomará del DOM y las validaciones necesarias pueden ocurrir en este punto. No es necesario crear funciones de controlador para ninguno de los componentes de entrada también.
Tu problema
Ahora, para su problema:
... quiero que se llame cuando presiono 'Enter cuando se ha ingresado el número completo
Si desea lograr esto, use un componente no controlado. No cree los controladores onChange si no es necesario. La enterclave enviará el formulario y se handleSubmitactivará la función.
Cambios que debes hacer:
Elimine la llamada onChange en su elemento
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
});
Maneje el envío del formulario y valide su entrada. Debe obtener el valor de su elemento en la función de envío del formulario y luego validarlo. Asegúrese de crear la referencia a su elemento en el constructor.
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
}
Ejemplo de uso de un componente no controlado:
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')
);
onBlurevento.