react笔记 8-19 事件对象、获取dom元素、双向绑定

本文主要是介绍react笔记 8-19 事件对象、获取dom元素、双向绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、事件对象event

通过事件的event对象获取它的dom元素

run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid")            //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{this.state.msg}</h2><br/><button aid='123' onClick={this.run}>事件对象</button></div>)}

2、表单事件、获取input的值

第一种方式OnChange

    constructor(props) {super(props)this.state = {msg:'我是一个home组件'}}inputChange=(event)=>{this.setState({msg:event.target.value     //通过事件对象的value获取值})}render() {return (<div><h2>{this.state.msg}</h2><br/><input type="text" name="" onChange={this.inputChange}></input></div>)}

第二种方式 ref //ref在vue中也有 不过写法不同

    inputChange = () => {let val = this.refs.username.valuethis.setState({msg:val})}render() {return (<div><h2>{this.state.msg}</h2><input ref="username" type="text"  name="" onChange={this.inputChange}></input></div>);}

3、键盘事件

    inputKeyUp = (e) => {if(e.keyCode === 13){this.setState({msg: e.target.value})}}render() {return (<div><h2>{this.state.msg}</h2><input ref="username" type="text"  name="" onKeyUp={this.inputKeyUp}</input></div> //另有keyDowm等等);}

4、实现双向数据绑定

通过change事件实现数据改变影响视图  视图改变影响数据即可 //module改变会自动影响视图

 constructor(props) {super(props)this.state = {msg: null}}inputChange = (e) => {this.setState({msg:e.target.value})}render() {return (<div><h2>{this.state.msg}</h2><input  type="text"  name="" onChange={this.inputChange} value={this.state.msg}></input></div>);}

这篇关于react笔记 8-19 事件对象、获取dom元素、双向绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---