<label htmlFor="insertArea">输入内容</label>
<input
id="insertArea"
className='input'
value={this.state.inputValue}
onChange={this.handleInputChange}
ref={(input) => {this.input = input}}
/>
ref的使用 我们可以使用箭头函数,input参数 指代的就是当前的input dom节点 然后赋值给this.input,后面即可直接使用this.input
handleInputChange() {
const value = this.input.value;
this.setState(() => ({
inputValue: value
}));
}
在监听改变的事件中我们就可以直接使用this.input拿到这个节点,也可以拿到输入框的值,这里注意setState使用箭头函数的时候,是异步的处理,所以拿this.input.value的时候需要提前保存一下,在对inputValue赋值