开发者学堂课程【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>
<h3>{this.state.msg}</h3>
// </div>
// }
show =(arg1,arg2) => {
// console.log(‘show
方法被调用了’+ arg1 + arg2)
//注意: React 中,如果想为 state 中的数据,重新赋值,不要使用 this.state.***=值
//应该调用 React 提供的 this.setState({ msg:’123’})
//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({ })