Реагуйте на користувачів, ось відповідь на повноту.
Реактивна версія 16.4.2
Ви або хочете оновити для кожного натискання клавіші, або отримаєте значення лише після надсилання. Додавання ключових подій до компонента працює, але є альтернативи, як рекомендовано в офіційних документах.
Контрольовані проти неконтрольованих компонентів
Контрольована
Від Документів - Форми та контрольовані компоненти :
У HTML формують такі елементи, як введення, textarea та select, як правило, підтримують власний стан та оновлюють його на основі введення користувача. У React змінний стан зазвичай зберігається у властивості стану компонентів та оновлюється лише за допомогою 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) Зв’яжіть обробник подій та створіть ref для введення в конструктор (значення не зберігається у стані)
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події.