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