Reagir usuários, aqui está uma resposta para a integridade.
Reagir versão 16.4.2
Você deseja atualizar para cada pressionamento de tecla ou obter o valor apenas no envio. Adicionar os principais eventos ao componente funciona, mas existem alternativas recomendadas nos documentos oficiais.
Componentes controlados vs não controlados
Controlada
No Documentos - Formulários e componentes controlados :
Em HTML, elementos de formulário como input, textarea e select normalmente mantêm seu próprio estado e o atualizam com base na entrada do usuário. Em React, o estado mutável geralmente é mantido na propriedade state dos componentes e atualizado apenas com setState ().
Podemos combinar os dois fazendo com que o estado React seja a “única fonte de verdade”. O componente React que renderiza um formulário também controla o que acontece nesse formulário nas entradas subsequentes do usuário. Um elemento do formulário de entrada cujo valor é controlado pelo React dessa maneira é chamado de "componente controlado".
Se você usar um componente controlado, precisará manter o estado atualizado para cada alteração no valor. Para que isso aconteça, você vincula um manipulador de eventos ao componente. Nos exemplos dos documentos, geralmente o evento onChange.
Exemplo:
1) Vincular manipulador de eventos no construtor (valor mantido no estado)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Criar função de manipulador
handleChange(event) {
this.setState({value: event.target.value});
}
3) Criar função de envio de formulário (o valor é obtido do 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>
Se você usar componentes controlados , sua handleChangefunção será sempre acionada, a fim de atualizar e manter o estado adequado. O estado sempre terá o valor atualizado e, quando o formulário for enviado, o valor será retirado do estado. Isso pode ser um engodo se seu formulário for muito longo, porque você precisará criar uma função para cada componente ou escrever uma simples que lide com a alteração de valor de cada componente.
Descontrolado
No componente Documentos - Não controlado
Na maioria dos casos, recomendamos o uso de componentes controlados para implementar formulários. Em um componente controlado, os dados do formulário são manipulados por um componente React. A alternativa são componentes não controlados, nos quais os dados do formulário são manipulados pelo próprio DOM.
Para gravar um componente não controlado, em vez de gravar um manipulador de eventos para cada atualização de estado, você pode usar um ref para obter valores de formulário no DOM.
A principal diferença aqui é que você não usa a onChangefunção, mas onSubmita forma para obter os valores e validar se necessário.
Exemplo:
1) Ligue o manipulador de eventos e crie ref à entrada no construtor (nenhum valor mantido no estado)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Criar função de envio de formulário (o valor é obtido do 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>
Se você usar componentes não controlados , não há necessidade de vincular uma handleChangefunção. Quando o formulário é enviado, o valor será retirado do DOM e as validações necessárias podem ocorrer neste momento. Não há necessidade de criar funções de manipulador para nenhum dos componentes de entrada também.
Seu problema
Agora, para o seu problema:
... Quero que seja chamado quando pressionar 'Enter quando o número inteiro tiver sido inserido
Se você deseja conseguir isso, use um componente não controlado. Não crie os manipuladores do onChange se não for necessário. A enterchave enviará o formulário e a handleSubmitfunção será acionada.
Alterações que você precisa fazer:
Remova a chamada onChange do seu 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
});
Manipule o formulário, envie e valide sua entrada. Você precisa obter o valor do seu elemento na função de envio de formulário e validar. Certifique-se de criar a referência ao seu elemento no construtor.
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
}
Exemplo de uso de um componente não 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.