10.react中ref用法

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

})