React事件方法、React定义方法的几种方式、获取数据、改变数据、执行方法传值
1、案例实现代码如下
import React, { Component } from 'react'; /**
* 特别注意this,对于传值和绑定都十分重要
*/
class Home4 extends Component{
constructor(props){
super(props);
//定义数据
this.state={
msg:'这是一个Home4组件',
name:"杨杰"
}
this.getMessage = this.getMessage.bind(this);
} run(){
alert("这是一个run方法");
} getData(){
alert(this.state.msg);
} //改变state值
setData=()=>{ this.setState({
msg:"改变msg的值"
})
}
getMessage(){
alert(this.state.msg);
}
//箭头函数
getName=()=>{
alert(this.state.name);
}
setName=(str)=>{
this.setState({
name:str
})
}
render() {
return(
<div>
Home4 index 事件方法
<br/>
方法:{this.state.name}
<br/>
<button onClick={this.run}>执行方法,通过this.方法名</button>
<br/>
<p>方式1:通过this.方法名.bind(this)将this对象传递给getData()方法体内的this对象</p>
<button onClick={this.getData.bind(this)}>执行方法1</button>
<br/>
<p>方式2:在构造函数,通过this.getMessage = this.getMessage.bind(this)这种方式赋值</p>
<button onClick={this.getMessage}>执行方法2</button>
<br/>
<p>方式3:在构造函数,通过this.getMessage = this.getMessage.bind(this)这种方式赋值</p>
<button onClick={this.getName}>执行方法3</button> <br/>
<button onClick={this.setData}>改变state中的值</button> <br/>
<button onClick={this.setName.bind(this,"zhangsan")}>执行方法传值</button> </div>
)
}
}
export default Home4;
React事件方法、React定义方法的几种方式、获取数据、改变数据、执行方法传值的更多相关文章
- ajax验证用户名 当用户名框的数据改变时 执行ajax方法
ajax验证用户名 当用户名框的数据改变时 执行ajax方法 <html xmlns="http://www.w3.org/1999/xhtml" ><head ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- (六)javascriptJS中定义对象的几种方式(转)
JavaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象 ...
- PHP定义字符串的四种方式
1.简介 在PHP中这门语言中,因为是弱类型语言,因此使用变量时不需提前定义即可使用. 我们在使用php进行开发的时候,大多数使用双引号.单引号进行定义字符串.既然有这两种方式,那么他们之间肯定是有区 ...
- vue2.* 事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象 05
<template> <div id="app"> <button v-on:click="run1()">执行事件的第一种 ...
- vue 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...
- Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...
- 使用react定义组件的两种方式
react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...
- Collections.sort方法对list排序的两种方式
Collections.sort( )分为两部分,一部分为排序规则,一部分为排序算法 . 规则用来判断对象,算法则考虑如何进行排序 对于自定义对象,sort()不知道规则,所以无法比较,这种情况下一定 ...
随机推荐
- linux使用VNC服务轻松远程安装oracle
VNC服务在远程服务器上安装oracle,新手安装oracle时总会遇到这样或者那样的问题,下面我就详细解说一下安装过程,其实oracle安装很简单,并不要把他相像的特别复杂. 本环境用:centos ...
- 浙大数据结构课后习题 练习一 7-1 Maximum Subsequence Sum (25 分)
Given a sequence of K integers { N1, N2, ..., NK }. A continuous subsequence is defined to ...
- svn使用教程(收藏)
SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...
- 多线程之CountDownLatch
下面请看一个应用场景:有1个driver和5个worker,需要满足以下两点要求: 当driver完成了全部的工作之后才允许worker们开始工作: 当所有的worker都完成了自己的工作之后,dri ...
- Linux下普通用户与root用户之间的互相切换
只是切换root身份,环境仍是普通用户shell su.su -.su root 按照提示输入相应的root密码,就可登录到root权限下. 用户和shell环境都切换为root sudo -i.su ...
- mysqli在php7中的使用
mysqli这个库还是比较繁杂的,这其中又分mysqli ,mysqli_stmt,mysqli_result......一堆类,特别乱 这里奉上thinkphp5.1中使用mysqli扩展的查询用法 ...
- buuctf@ciscn_2019_en_2
from pwn import * context.log_level='debug' io=process('./ciscn_2019_en_2') libc=ELF('./libc.so') el ...
- Python前端HTML
一.web标准介绍 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...
- vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
- CSP-S2 游记
CSP-S2 游记 & AFO 感想 Day0 早上考了一场式,非常简单,但是懒得写正解.230pts. 晚上听了一下WYQ大神的考前直播,写了一下树上倍增(我是不会告诉你我还写炸了) 与lu ...