react 获取真实dom节点的方法 一般不推荐用 只有在实现复杂的业务时 或者动画效果时
1.e.target
2.ref 的两种写法
handleOnChange(e) {
// console.log("事件目标对象", e.target.value)
// console.log("todolist组建对象",this)
// this.setState({
// inputValue: e.target.value,
// })
//新版 支持一个方法返回一个state对象 变成异步 直接使用会报错
// const value = e.target.value;
// const value = this.input.value;
const value = this.refs.input.value;
this.setState(() => ({
// inputValue: e.target.value,
inputValue: value
}));
}
<input
onChange={e => this.handleOnChange(e)}
ref='input'
/>
//将this.input 和input 元素进行绑定
ref={(input) => {this.input =input}}
异步执行setState 函数之后可以回调执行获取真实的dom节点 不然会出现错误 DOM 获取不及时
setState(()=>({
inputValue: value
}),()=>{
获取真实dom
})