react学习---day03--React的事件处理

(1).通过onXxx属性指定事件处理函数     a.React使用的自定义(合成)事件,并不是使用原生的DOM事件 ===> 为了更好的兼容性     b.React中的事件是通过事件委托的方式处理的(委托给组件的最外层的元素: 即id为app的div) ===> 为了高效 (2).通过event.target得到发生事件的DOM元素对象 ===> 为了不过度使用ref   通过上一篇的文章中的例子:

 1 class App extends React.Component {
 2     // 创建一个createRef容器
 3     value1 = React.createRef() // React.createRef()调用后会返回一个容器且这个容器只能储存一个元素
 4     showData1 = () => {
 5         alert(this.value1.current.value) // current这个对象值是固定的
 6     }
 7     showData2 = (event) => {
 8         alert(event.target.value)
 9     }
10     render() {
11         return (
12             <div>
13                 <input ref={this.value1} type="text" />
14                 <button onClick={this.showData1}>点击我</button>
15                 <input onBlur={this.showData2} type="text" />
16             </div>
17         )
18     }
19 }
20 ReactDOM.render(<App />, document.getElementById("app"))

当一个元素在有事件处理的时候通过event.target就可以拿到DOM元素,不需要使用到ref的

标签：事件处理,React,target,DOM,---,createRef,event
来源： https://www.cnblogs.com/M1NG/p/14269493.html