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()不知道规则,所以无法比较,这种情况下一定 ...
随机推荐
- 【异常】org.apache.phoenix.exception.PhoenixIOException: SYSTEM:CATALOG
1 详细异常信息 rror: SYSTEM:CATALOG (state=,code=) org.apache.phoenix.exception.PhoenixIOException: SYSTEM ...
- MySQL快速清空表数据
truncate table 可以不删除表的情况下,快速情况表数据
- golang连接activemq,发送接收数据
介绍 使用golang连接activemq发送数据的话,需要使用一个叫做stomp的包,直接go get github.com/go-stomp/stomp即可 代码 生产者 package main ...
- osworkflow 入门基础
OSWorkFlow入门指南目的 这篇指导资料的目的是介绍OSWorkflow的所有概念,指导你如何使用它,并且保证你逐步理解OSWorkflow的关键内容. 本指导资料假定你已经部署OSWorkfl ...
- mysql总结1
修改表名:alter table table_name rename new_table_name; 添加字段:alter table table_name add column_name type_ ...
- hive建表结构
drop table dw.fct_so;create table dw.fct_so(so_id bigint comment '订单ID',parent_so_id bigint comment ...
- 页面内置函数${fn:}
引入头文件<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions " %&g ...
- Django学习系列11:在服务器中处理POST请求
之前的代码还没有为表单指定action=属性,因此提交表单默认返回之前渲染的页面,即“/”,这个由视图函数home_page处理.下面修改这个视图函数,让它能处理POST请求. 这意味着要为视图函数h ...
- 使用gson将字符串转换成对象
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create(); System.out.pr ...
- Vue.use() 方法
1.本人在学习Vue时,会用到 Vue.use() .例如:Vue.use(VueRouter).Vue.use(MintUI).但是用 axios时,就不需要用 Vue.use(axios),就能直 ...