React基础篇（六）React中绑定事件的注意点

本小节讲述在 React 中为 button 设置点击事件的注意点

1 前言

在 React 中，事件的名称都是 React 中提供的，因此名称的首字母必须厉害例如

onClick      onMouseOver

然后为事件提供的处理函数如下

onClick ={function}

2 为button 设置点击事件

2.1 无参数的点击事件

import React from 'react';export default class EventItem extends  React.Component {render() {return (<div><h2>React中设置按钮的点击事件</h2><button onClick={this.show}> 按钮一 </button></div>);}show(){console.log("button的 点击事件")}
}

或者是

import React from 'react';export default class EventItem extends React.Component {render() {return (<div><h2>React中设置按钮的点击事件</h2><button onClick={()=>this.show()}> 按钮一</button></div>);}show = () => {console.log('button的 点击事件');};}

2.2 有参数的点击事件

import React from 'react';export default class EventItem extends React.Component {render() {return (<div><h2>React中设置按钮的点击事件</h2><button onClick={() => this.show2('这里是传递的参数')}> 按钮二</button></div>);}show2 = (pro) => {console.log('button 的点击事件 这里是传递的参数' + pro.toString());};
}

2.3 点击按钮修改私有属性值

在 React 中，如要修改 state 中的数据，推荐使用 this.setState({})
如下：

import React from 'react';export default class EventItem extends React.Component {constructor() {super();this.state = {message: '这里是初始化的数据'};}render() {return (<div><h2>React中设置按钮的点击事件</h2><button onClick={() => this.updateMessage('这里是新的数据')}>点击修改数据</button></div>);}updateMessage = (pro) => {this.setState({message: pro});};
}

需要注意的是：

如果 state 中有多个属性的话，调用 setState 刷新数据时，只会把对应的 state 中属性值状态更新，而不会覆盖其它的
setState 方法执行是异步执行的

如果是想在 setState 执行结束后，我们再获取修改的属性的值或者其他的一些同步的后续操作，可以为 setState 设置一个回调函数

    this.setState({message: pro}, function() {console.log('这里是回调')});

2.4 React 中绑定文本框与 state 中的值

import React from 'react';export default class EventItem extends React.Component {constructor() {super();this.state = {message: '这里是初始化的数据',name: '初始化的name'};}render() {return (<div><h2>React中设置按钮的点击事件</h2><p>输入姓名 <input type="text" style={{width: '20%'}} value={this.state.name} onChange={(e) => this.textChange(e)}/></p></div>);}textChange = (e) => {//  获取当前实时输入的文本框的值console.log(e.target.value);//  第二种方式// console.log(this.refs.txt.value);this.setState({name:e.target.value})};

React基础篇（六）React中绑定事件的注意点相关推荐

react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
Vue基础篇六：Vue使用JSX进行动态渲染
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Nginx实战基础篇六通过源码包编译安装部署LNMP搭建Discuz论坛
Nginx实战基础篇六通过源码包编译安装部署LNMP搭建Discuz论坛版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议您可以自由复制.发行.展览. ...
JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
React基础篇（二）之点击button修改属性值
本篇将实现点击一个按钮动态修改数据上一篇 React 项目的初始化创建 1 index.html 中 <!DOCTYPE html> <html lang="en&quo ...
React基础篇（四）之创建组件方式分析
本小将讲述在 React 中, 1.通过函数 function 方式创建组件并分离成单独的组件实现,然后传递参数给组件使用 2.通过关键字 class 来创建组件,并分离成单独的组件实现,然后传递参 ...

React基础篇（六）React中绑定事件的注意点

1 前言

2 为button 设置点击事件

2.1 无参数的点击事件

2.2 有参数的点击事件

2.3 点击按钮修改私有属性值

2.4 React 中绑定文本框与 state 中的值

React基础篇（六）React中绑定事件的注意点相关推荐

最新文章

热门文章