使用 this.setState 修改 state 上的数据|学习笔记

简介: 快速学习使用 this.setState 修改 state 上的数据

开发者学堂课程【React 入门与实战使用 this.setState 修改 state 上的数据】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8117


使用 this.setState 修改 state 上的数据

export default class BindEvent extends React.Componen{constructor(){

super()

//私有数据

this.state = {}

}

render(){

return <div>

BindEvent 组件

<hr/>

{/*React 中,有一套自己的事件绑定机制:事件名,是小驼峰命名"/}

{/* <button onClick={function(){ console.log('ok') }}>按钮</button> */}

{/* <button onClick={this .myclickHandler}>按钮</button> */}

{/*注意: onClick 只接受 function 作为处理函数*/}

<button onClick={ ()=>{ this .myclickHandler() } }>按钮

</button>

React 中,如果想要修改 state 中的数据,推荐使用

this.setState({ })

如下:

export default class BindEvent extends React.Component{

construcntor(){
super()
this.state = {

msg:’哈哈

}
}

render(){
return <div>

{/*需求:点击按钮,把修改 msg 的值*/}
<button onClick={ () => this. show('
图片图片’)}>按钮</outton>

image.png

<h3>{this.state.msg}</h3>
//    </div>
//   }

show =(arg1,arg2) => {

// console.log(‘show方法被调用了’+ arg1 + arg2)

//注意: React 中,如果想为 state 中的数据,重新赋值,不要使用 this.state.***=

//应该调用 React 提供的 this.setState({ msg:’123’})

image.png

//This.stste.msg=’oooooo’

//React 中,推荐使用 this.setState({})修改 状态值

This.setState({

Msg:’123’+ arg1 + arg2

})

}
}

用的最多的事件绑定形式为:

<button onClick-{()=>this.show('传参') }>按钮</button>

//事件的处理函数,需要定义为一个箭头函数,然后赋值给函数名称show = (arg1) =>{
console.log('show
方法'+arg1)
}
React 中,如果想要修改 state 中的数据,推荐使用 thil.setState({ })

相关文章
|
22小时前
|
前端开发
为什么调用setState而不是直接改变state
为什么调用setState而不是直接改变state
19 0
|
21小时前
setState 和 replaceState 的区别
setState 和 replaceState 的区别
16 2
|
21小时前
v-model绑定vuex的state怎么实现?
v-model绑定vuex的state怎么实现?
|
22小时前
|
前端开发
setState和repalceState的区别
setState和repalceState的区别
16 0
|
9月前
|
JavaScript
state 和 props 触发更新的生命周期分别有什么区别?
state 和 props 触发更新的生命周期分别有什么区别?
|
22小时前
|
前端开发
对比state和props的区别
对比state和props的区别
|
22小时前
|
前端开发 JavaScript
设置状态:setState
设置状态:setState
|
9月前
|
前端开发 JavaScript
props和state的区别
props和state的区别
48 0
|
9月前
|
索引
beamManagement(二)TCI-state/QCL
上一篇讲解了idle初始接入阶段,基站和UE用SSB的索引,关联PRACH的发送时刻比较内涵的指示了波束信息;在RRC建立进入connected mode后,就可以通过TCI State来指示波束信息, 为利于后续内容理解,这里先看下TCI-state及QCL的概念。
|
10月前
|
前端开发
react为什么调用setState而不是直接改变state
react为什么调用setState而不是直接改变state
64 0