一、事件绑定处理

强烈推荐第四种绑定写法

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基础（叁）———事件处理相关推荐

react方法返回html_React全家桶之React基础(推荐新手必看)
学习目标安装create-react-app脚手架熟练React基础语法掌握JSX语法掌握setState 掌握React生命周期掌握props传递参数掌握React组件通信资源 rea ...
[React 基础系列] 受控表单 vs 不受控表单
[React 基础系列] 受控表单 vs 不受控表单受控表单 refs 不受控表单不受控组件总结之前的学习部分带了一些表单内容的使用--之前的案例基本上是用的都是 input,接下来就学习一下 ...
React基础学习（一）
一.虚拟DOM和真实DOM <script type="text/babel"> // 此处一定要写babel!!!!!!!// 1. 创建虚拟DOM// const ...
React基础知识点
React基础知识点目标能够说出React是什么能够说出React的特点能够掌握React的基本使用能够使用React脚手架什么是React (★★★) React是一个用于构建用户界面的 ...
React基础学习-1
目录 1.React概述 1.1React简介 1.2 项目搭建 1.3项目结构说明 1.4 React 基本使用 2. JSX 2.1 JSX简介 2.2 JSX中的表达式 2.3 条件渲染 2.4 ...
react基础知识1
React基础知识1 一.React的基本认识 1.1 官网:https://reactjs.org/ 1.2 介绍描述 <1> 用于构建用户界面的 JavaScript 库(只关注于Vi ...
【React 基础】之 React 基本介绍、jsx 规则、模块与组件
React 全家桶 React 基础 React-Router 路由 PubSub + 消息管理库 Redux 集中式的状态管理 Ant-Design UI 组件库 - React 简介官网英文官 ...
react基础_React基础
react基础 After all my teachings about React, be it online for a larger audience or on-site for compan ...
react 基础学习
react 基础学习采用的编程软件是vsCode 安装Simple React Snippets插件目录组成结构 src/index.js 命令注释 src/app.js 命令注释注意: 所有命 ...
React 基础案例 | 支持左右按钮点击查看信息的卡片组件（二）
一.开篇大家好,本篇文章小编将和大家一起实现一个用左右点击的方式翻看卡片信息的组件,这个组件很常用,一般会在网站上显示案例或团队成员的信息.通过本案例我们继续练习 useState Hook 在实际 ...

React基础（叁）———事件处理

一、事件绑定处理

二、ref 引用

React基础（叁）———事件处理相关推荐

最新文章

热门文章