Реагируйте на пользователей, вот ответ для полноты.
Реагировать на версию 16.4.2
Вы либо хотите обновить для каждого нажатия клавиши, либо получить значение только при отправке. Добавление ключевых событий в компонент работает, но есть альтернативы, рекомендованные в официальных документах.
Контролируемые и неконтролируемые компоненты
Управляемая
Из Документов - Формы и Контролируемые компоненты :
В HTML элементы формы, такие как input, textarea и select, обычно поддерживают свое собственное состояние и обновляют его на основе пользовательского ввода. В React изменяемое состояние обычно сохраняется в свойстве state компонентов и обновляется только с помощью setState ().
Мы можем объединить их, сделав состояние Реакта «единственным источником истины». Затем компонент React, который отображает форму, также управляет тем, что происходит в этой форме при последующем вводе пользователем. Элемент формы ввода, значение которого контролируется React таким способом, называется «контролируемым компонентом».
Если вы используете контролируемый компонент, вам придется обновлять состояние при каждом изменении значения. Чтобы это произошло, вы привязываете обработчик события к компоненту. В примерах документов, как правило, событие onChange.
Пример:
1) Связать обработчик событий в конструкторе (значение сохраняется в состоянии)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Создать функцию обработчика
handleChange(event) {
this.setState({value: event.target.value});
}
3) Создать функцию отправки формы (значение берется из состояния)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Визуализация
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Если вы используете контролируемые компоненты, ваша handleChangeфункция всегда будет запущена, чтобы обновлять и сохранять правильное состояние. Состояние всегда будет иметь обновленное значение, и когда форма будет отправлена, значение будет взято из состояния. Это может быть неудобно, если ваша форма очень длинная, потому что вам придется создать функцию для каждого компонента или написать простую, которая обрабатывает изменение значения каждого компонента.
неконтролируемая
Из Документов - Неконтролируемый компонент
В большинстве случаев мы рекомендуем использовать контролируемые компоненты для реализации форм. В контролируемом компоненте данные формы обрабатываются компонентом React. Альтернативой являются неконтролируемые компоненты, где данные формы обрабатываются самим DOM.
Чтобы написать неконтролируемый компонент, вместо того, чтобы писать обработчик событий для каждого обновления состояния, вы можете использовать ref для получения значений формы из DOM.
Основным отличием здесь является то, что вы используете не onChangeфункцию, а onSubmitформу для получения значений и проверки при необходимости.
Пример:
1) Привязать обработчик события и создать ссылку для ввода в конструкторе (значение не сохраняется в состоянии)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Создать функцию отправки формы (значение берется из компонента DOM)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Визуализация
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Если вы используете неконтролируемые компоненты, нет необходимости связывать handleChangeфункцию. Когда форма отправлена, значение будет взято из DOM, и в этот момент могут произойти необходимые проверки. Нет необходимости создавать какие-либо функции-обработчики для любого из компонентов ввода.
Ваша проблема
Теперь для вашего вопроса:
... Я хочу, чтобы он вызывался, когда я нажимаю «Enter», когда введено все число
Если вы хотите добиться этого, используйте неконтролируемый компонент. Не создавайте обработчики onChange, если в этом нет необходимости. enterКлюч будет представлять форму и handleSubmitфункцию уволят.
Изменения, которые вам нужно сделать:
Удалите вызов onChange в вашем элементе
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
});
Обработайте форму отправки и подтвердите ваш вклад. Вам нужно получить значение из вашего элемента в функции отправки формы, а затем проверить. Убедитесь, что вы создали ссылку на ваш элемент в конструкторе.
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
}
Пример использования неконтролируемого компонента:
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')
);
onBlurсобытием.