У меня есть этот компонент:
import React from 'react';
export default class AddItem extends React.Component {
add() {
this.props.onButtonClick(this.input.value);
this.input.value = '';
}
render() {
return (
<div className="add-item">
<input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
<button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
</div>
);
}
}
Я хочу, чтобы кнопка была отключена, когда входное значение пуст. Но код выше не работает. В нем говорится:
add-item.component.js: 78 Uncaught TypeError: Не удается прочитать значение свойства 'undefined
указывая на disabled={!this.input.value}
. Что я могу делать здесь неправильно? Я предполагаю, что, возможно, ref еще не создан, когда выполняется метод render
. Если, так что же это за труд?