上接:https://www.cnblogs.com/chenxi188/p/11782349.html

项目目录:

my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
componets/
Demo.js
App.css
App.js
App.test.js
index.css
index.js
logo.svg

一、自写一个方法(函数),然后用按钮onClick触发它

如果想要在react模板render()内执行一个自定方法(函数),就要这样写,在components目录下新建立一个【Demo.js】:

import React from 'react';

class Demo extends React.Component{
constructor(){
super(); this.state={
name:'xiaoming'
}
} //自定义方法要写在构造函数外
run2(){
alert('这是一个待执行函数')
} render(){
return(
<div>
<button onClick={this.run2}>点这里执行函数</button>
</div>
);
}
} export default Demo;

【App.js】

import React, { Component } from 'react';
import logo from './logo.svg';
//import './App.css'; //从components文件夹下引入js
import Demo from './components/Demo.js'; class App extends Component { render (){
return(
<div className="App">
<h1>这里是app.js根组件</h1> <Demo />
</div>
);}
} export default App;

进入项目根目录:运行cmd:npm start,运行结果:

二、自写方法引用构造函数内的数据(改变this指向的)写法

写法1【Demo.js】:

import React from 'react';

class Demo extends React.Component{
constructor(){
super(); this.state={
msg:'this is a state messages!'
}
} //自定义方法:引用构造函数内的数据写法1(引用时必须.bind(this),否则报错,找不到msg):
run2(){
alert(this.state.msg)
} render(){
return(
<div>
<button onClick={this.run2.bind(this)}>点这里执行函数</button>
</div>
);
}
} export default Demo;

写法2【Demo.js】:

import React from 'react';

class Demo extends React.Component{
constructor(){
super(); this.state={
msg:'方法2 成功获取到我咯——state信息!'
} //第2种获取构造函数state内数据写法【在构造函数内提前用.bind(this),声明this.getmsg()
this.getmsg=this.getmsg.bind(this);
} //自定义方法:引用构造函数内的数据写法2(引用时):
getmsg(){
alert(this.state.msg)
} render(){
return(
<div>
<button onClick={this.getmsg}>点这里执行函数</button>
</div>
);
}
} export default Demo;

写法3:【Demo.js】最省事写法

import React from 'react';

class Demo extends React.Component{
constructor(){
super(); this.state={
msg:'方法3 成功获取到我咯——state信息!'
}
} //自定义方法 引用构造函数内的数据写法3,不必用.bind(this):
getmsg=()=>{
alert(this.state.msg)
} render(){
return(
<div>
<button onClick={this.getmsg}>点这里执行函数</button>
</div>
);
}
} export default Demo;

不用.bind(this)时报错,因为它无法正确指向

App.js用不变,直接刷新网址查看效果:

三、改变state值的写法this.setState()

import React from 'react';

class Demo extends React.Component{
constructor(){
super(); this.state={
msg:'这是state的msg原始值'
}
} //用setState()方法重写state指定值(这里用方法3,箭头函数改变this指向方式)
changeMsg=()=>{
this.setState({
msg:"!!!!!!这是state的msg改变值!!!!!"
})
} render(){
return(
<div>
<h1>{this.state.msg}</h1>
<button onClick={this.changeMsg}>点这里改变state值</button>
</div>
);
}
} export default Demo;

运行结果:

点击后:

四、通过自写方法的参数,向state内传值

【1】pushMsg=(name)=>{this.setState({            msg:name        })
【2】onClick={this.pushMsg.bind(this,'我是用参数传过来的值')}

4.1传一个参数【Demo.js】:
import React from 'react';

class Demo extends React.Component{
constructor(props){
super(props); this.state={
msg:'原始值'
}
}
//【1】自写带参数函数
pushMsg=(name)=>{
this.setState({
msg:name
})
} render(){
return(
<div>
<h1>{this.state.msg}</h1>
{
//【2】调用自写函数用参数传值到state
}
<button onClick={this.pushMsg.bind(this,'我是用参数传过来的值')}>点这里用方法传值</button>
</div>
)
}
} export default Demo;

App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Demo from './components/Demo' function App() {
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" /> <Demo />
</div>
);
} export default App;

【效果】

点后:

4.2通过自写函数传多个参数值到state

Demo.js

import React from 'react';

class Demo extends React.Component{
constructor(props){
super(props); this.state={
msg:'原始值',
msg2:'原始值2号'
}
}
//自写带参数函数
pushMsg=(name,name2)=>{
this.setState({
msg:name,
msg2:name2
})
} render(){
return(
<div>
<h1>{this.state.msg}</h1>
<h1>{this.state.msg2}</h1>
{
//调用自写函数用参数传值到state
}
<button onClick={this.pushMsg.bind(this,'我是用参数传过来的值。','传过来第二个值')}>点这里用方法传值</button>
</div>
)
}
} export default Demo;

App.js不变

效果:

点后:

五、React事件方法(自写一个方法(函数),然后用按钮onClick触发它、自写方法改变this指向3种写法、的更多相关文章

  1. 请写一个php函数,可以接受任意数量的参数

    请写一个php函数,可以接受任意数量的参数 这是一道面试题.怎么写这个函数呢? function fun(......) { } ----------------------------------- ...

  2. 自己写一个strcmp函数(C++)

    题目说明: 写一个函数,实现两个字符串的比较.即自己写一个strcmp函数,函数原型为int strcmp( char * p1, char * p2); 设p1指向字符串s1,p2指向字符串s2.要 ...

  3. 写一个PHP函数,实现扫描并打印出指定目录下(含子目录)的所有jpg文件名

    写一个PHP函数,实现扫描并打印出指定目录下(含子目录)的所有jpg文件名 <?php $dir = "E:\照片\\";//打印文件夹中所有jpg文件 function p ...

  4. 【Java面试题】23 java中有几种方法可以实现一个线程?用什么关键字修饰同步方法? stop()和suspend()方法为何不推荐使用?

    java5 以前, 有如下两种:第一种:new Thread(){}.start();这表示调用 Thread 子类对象的 run 方法, new Thread(){}表示一个Thread 的匿名子类 ...

  5. JavaScript 自己写一个 replaceAll() 函数

    JavaScript 的  replace()  方法可以在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 但是,只输入字符串的话,仅替换第一个字符,当然也可以用正则表达式来进行 ...

  6. 依据ECMA规范,手写一个bind函数

    Function.prototype.bind 函数,参见ECMA规范地址 如题,这次来实现一个boundFunction函数,不挂载在Function.prototype上,而是一个单独声明的函数. ...

  7. 为LoadRunner写一个lr_save_float函数

    LoadRunner中有lr_save_int() 和lr_save_string() 函数,但是没有保存浮点数到变量的lr_save_float函数.<lr_save_float() func ...

  8. 【写一个自己的js库】 5.添加修改样式的方法

    1.根据id或class或tag修改样式,样式名是-连接格式的. function setStyleById(elem, styles){ if(!(elem = $(elem)) return fa ...

  9. 34.编写2个接口:InterfaceA和InterfaceB;在接口InterfaceA中有个方法void printCapitalLetter();在接口InterfaceB中有个方法void printLowercaseLetter();然 后写一个类Print实现接口InterfaceA和InterfaceB,要求printCapitalLetter()方法 实现输出大写英文字母表的功能,

    //接口InterfaceA package jieKou; public interface IInterfaceA { void printCapitalLetter(); } //接口Inter ...

随机推荐

  1. java并发:初探sleep方法

    sleep与wait sleep是Thread方法,使得当前线程从运行态变为阻塞态.但它不会释放对象的锁. wait方法是Object方法,它的作用是使得当前拥有对象锁的线程从运行态变为阻塞态, 它会 ...

  2. 5G风口之下,NFV为何发展迅速

    导读 5G高带宽.低时延.大容量的接入方式,注定它一定要依赖于跟以往完全不同的专业设备模式来实现,因此也创造了更多的方向和机会.NFV就是其中之一. 5G最大的变化在网络层面,需要底层网络架构形成一种 ...

  3. SSM-文件上传

    因为开发环境和线上环境系统不一样,所以需要区别环境 config.java 可以判断系统进行自动化的区别,我是手动去切换注释的 public class config { //public stati ...

  4. 「CF55D」Beautiful numbers

    传送门 Luogu 解题思路 毒瘤数位DP,发现一个前缀我们只需要记录它对 \(\operatorname{lcm}(1,2,3,\cdots,9)=2520\) 取模的值即可,所以我们在 DP 时记 ...

  5. Paper代写:别让段落结尾拉低你的分数

    为了达到paper写作格式和字数要求,学生往往会在段末做一件事:总结.都不算是一个很长的段落.本来就写不了多少论证的内容,我们还强制加一个总结句,不仅占用了我们论证的篇幅,而且显得多余(段首的主题句已 ...

  6. uni-app小程序滑动事件

    <view class="relative" @touchmove="handletouchmove" @touchstart="handlet ...

  7. 51nod 1444:破坏道路 广度优先搜索

    1444 破坏道路 题目来源: CodeForces 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  取消关注 在某一个国家,那儿有n个城市,他们通过 ...

  8. DB2的简单操作

    转 最近在看db2,边读边写了一些,记下来,虽然写的乱七八糟.以备后用. 这些都写的很简单.我觉得也算是一些简单的操作吧,有些也是摘自别人的blog具体是引用哪的就不太记得了. 一.DB2两种注释写法 ...

  9. tensorflow学习笔记(二)常量、变量、占位符、会话

    常量.变量.占位符.会话是tensorflow编程的基础也是最常用到的东西,tensorflow中定义的变量.常量都是tensor(张量)类型. 常量tf.constant() tensorflow中 ...

  10. 京东首页如何实现pc端和移动端加载不同的html的?

    进入www.jd.com后代码判断是手机的话就跳转m.jd.com let ua = window.navigator.userAgent.toLocaleLowerCase() let murl = ...