使用 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({ })

相关文章
|
6月前
|
前端开发
为什么调用setState而不是直接改变state
为什么调用setState而不是直接改变state
51 0
|
1月前
|
前端开发 开发者
为什么调用 setState 而不是直接改变 state
为什么调用 setState 而不是直接改变 state
|
1月前
|
前端开发 开发者
对比state和props的区别?
对比state和props的区别?
|
3月前
|
存储 前端开发
state 和 props 有什么区别?
【8月更文挑战第31天】
42 0
|
3月前
|
存储 前端开发
State 与 Props:详解区别
【8月更文挑战第24天】
49 0
|
6月前
setState 和 replaceState 的区别
setState 和 replaceState 的区别
53 2
|
JavaScript
state 和 props 触发更新的生命周期分别有什么区别?
state 和 props 触发更新的生命周期分别有什么区别?
|
6月前
|
前端开发
setState和repalceState的区别
setState和repalceState的区别
59 0
|
6月前
|
前端开发
对比state和props的区别
对比state和props的区别
|
6月前
|
前端开发 JavaScript
设置状态:setState
设置状态:setState