我有这个组成部分:
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未捕获的TypeError:无法读取未定义的属性“值”
指向disabled={!this.input.value}。我在这里怎么做错了?我猜测render执行方法时可能尚未创建ref 。如果是,那么解决方法是什么?
disabled={!this.input.value}
render
使用refs不是最佳实践,因为它直接读取DOM,最好使用React的state。另外,您的按钮不会更改,因为该组件不会重新渲染并保持其初始状态。
refs
state
每次输入字段更改时,您都可以将其setState与onChange事件侦听器一起使用以再次呈现组件:
setState
onChange
// Input field listens to change, updates React's state and re-renders the component. <input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} /> // Button is disabled when input state is empty. <button disabled={!this.state.value} />
这是一个工作示例:
class AddItem extends React.Component { constructor() { super(); this.state = { value: '' }; this.onChange = this.onChange.bind(this); this.add = this.add.bind(this); } add() { this.props.onButtonClick(this.state.value); this.setState({ value: '' }); } onChange(e) { this.setState({ value: e.target.value }); } render() { return ( <div className="add-item"> <input type="text" className="add-item__input" value={this.state.value} onChange={this.onChange} placeholder={this.props.placeholder} /> <button disabled={!this.state.value} className="add-item__button" onClick={this.add} > Add </button> </div> ); } } ReactDOM.render( <AddItem placeholder="Value" onButtonClick={v => console.log(v)} />, document.getElementById('View') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='View'></div>