相关疑难解决方法(0)

我有这个组件:

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:无法读取未定义的属性"value"

指着disabled={!this.input.value}.我在这里做错了什么？我猜测,当render执行方法时,可能还没有创建ref .如果,那么什么是workararound？