React事件,修改this.state的值
1、React中绑定事件
React中绑定事件格式:
onClick = { function }
React中绑定事件的标准用法:
import React from 'react' export default class Hello5 extends React.Component { constructor() { super() this.state = { msg: '测试点击事件' } } render() { return <div> 基于class创建组件, {this.props.id} + '--' + {this.props.name} <h4>{this.state.msg}</h4> {/* 测试点击事件 */} <button id="btn" onClick={ () => this.myOnclickHandler('hehe') }>测试点击事件</button> </div> } // myOnclickHandler(msg) { // console.log(msg) // } myOnclickHandler = (msg) => { console.log(msg) } }
2、修改this.state的值
通过this.setState({})来修改
import React from 'react' export default class Hello5 extends React.Component { constructor() { super() this.state = { msg: '测试点击事件' } } render() { return <div> 基于class创建组件, {this.props.id} + '--' + {this.props.name} <h4>{this.state.msg}</h4> {/* 测试点击事件 */} <button id="btn" onClick={ () => this.myOnclickHandler(this.state.msg) }>测试点击事件</button> </div> } // myOnclickHandler(msg) { // console.log(msg) // } // myOnclickHandler = (msg) => { // console.log(msg) // console.log(this.state.msg) // this.setState({msg:'msg被修改了。。。'}) // 只是更新msg属性,如果有其它属性不会丢失或覆盖 // console.log(this.state.msg) // 此时还没有修改,因为setState()是异步的 // } myOnclickHandler = (msg) => { console.log(msg) console.log(this.state.msg) this.setState({msg:'msg被修改了。。。'}, function () { console.log(this.state.msg) }) } }
this.state修改前
this.state修改后
posted on 2019-12-11 00:20 wenbin_ouyang 阅读(701) 评论(0) 编辑 收藏 举报