React基础(叁)———事件处理
生活随笔
收集整理的這篇文章主要介紹了
React基础(叁)———事件处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、事件綁定處理
強烈推薦第四種綁定寫法
import React, { Component } from "react";export default class App extends Component {render() {return (<div><input></input><buttononClick={() => {console.log("click1");}}>add</button><button onClick={this.handleClick2}>add2</button><button onClick={this.handleClick3}>add3</button><buttononClick={() => {this.handleClick4();//推薦}}>add4</button></div>);}handleClick2() {console.log("click2");}handleClick3 = () => {console.log("click3");};handleClick4 = () => {console.log("click4");}; }/*** onMouseOver 鼠標移入觸發* onClick 鼠標點擊觸發**//*** React 并不會真正的綁定事件到每一個具體的<>元素上,而是采用事件代理的模式*/
二、ref 引用
引用獲取數據
不推薦使用this.refs.username 格式。應為可能多人編輯重名。因此在打開嚴格模式下會報錯。
嚴格模式如下,index.js文件
總結
以上是生活随笔為你收集整理的React基础(叁)———事件处理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 安利自己读CS博士的鸡汤
- 下一篇: mac解锁+卸载软件步骤