步骤

1、components下新建BindEventState.jsx文件，代码如下：

import React from 'react'
export default class BindEventState extends React.Component{constructor(){super()this.state = {}}render(){return <div><button onClick={()=>{this.show()}}>按钮</button></div>}show = ()=>{console.log('show方法被调用')}
}

2、做以下修改：

import React from 'react'
export default class BindEventState extends React.Component{constructor(){super()this.state = {}}render(){return <div><button onClick={ ()=>this.show() }>按钮</button></div>}show = ()=>{console.log('show方法被调用')}
}

3、为state添加msg

import React from 'react'
export default class BindEventState extends React.Component{constructor(){super()this.state = {msg:'HAHA'}}render(){return <div><button onClick={ ()=>this.show() }>按钮</button><h3>{this.state.msg}</h3></div>}show = ()=>{console.log('show方法被调用')}
}

React中，如果想为state中的数据重新赋值，不可以使用this.state. = 值
应调用React提供的this.setState（{msg：‘123’}）**

需求：点击按钮，修改msg的值。

 import React from 'react'
export default class BindEventState extends React.Component{constructor(){super()this.state = {msg:'HAHA'}}render(){return <div><button onClick={ ()=>this.show() }>按钮</button><h3>{this.state.msg}</h3></div>}show = ()=>{console.log('show方法被调用')//React中，如果想为state中的数据重新赋值，不可以使用this.state.** = 值//应调用React提供的this.setState({msg：'123'})//React中，使用this.setState()修改状态值this.setState({msg:'134'})}
}

注意项

注意：在setState中，只会把对应的state状态更新，而不会覆盖其他的state状态
注意：this.setState方法为异步。在this.setState之后又想拿到最新的state值，需要使用this.setState({{},callback})

上一篇:WEBPACK+ES6+REACT入门(5/7)-在React中为按钮绑定点击事件
下一篇:WEBPACK+ES6+REACT入门(7/7)-React中绑定文本框与state中的值

END

WEBPACK+ES6+REACT入门(6/7)-使用this.setState修改state上的数据相关推荐

React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
React入门看这篇就够了《转载，侵删》
react - JSX React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自 ...
React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案参考文章: (1)React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 (2)https://www.cnbl ...
《慕课React入门》总结
React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
Flux --gt; Redux --gt; Redux React 入门基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
arcgis开发多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
B站尚硅谷React入门教程
视频链接:React全家桶(技术栈) 第1章:React入门 1.1. React简介 1.1.1 官网英文官网: https://reactjs.org/ 中文官网: https://react. ...
Webpack实战：入门、进阶与调优（第2版）
你是否经常听到项目组的同事抱怨:"为什么Webpack这么慢?""为什么Webpack又出错了?" "发布到线上的代码为什么不能正常工作?" ...
传智播客 React 入门三天课程
传智播客 React 入门三天课程第一天理论和配置虚拟DOM和DIFF算法 React 的核心是虚拟DOM和DIFF算法.DIFF 算法确保虚拟DOM高效运行(从上到下分别是 tree-dif ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...

WEBPACK+ES6+REACT入门(6/7)-使用this.setState修改state上的数据

WEBPACK+ES6+REACT入门6/7-使用this.setState修改state上的数据

步骤

需求：点击按钮，修改msg的值。

注意项

WEBPACK+ES6+REACT入门(6/7)-使用this.setState修改state上的数据相关推荐

最新文章

热门文章