react ref的使用

	<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赋值

猜你喜欢

转载自blog.csdn.net/lee727n/article/details/107961077
今日推荐