react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

本文主要是介绍react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、定义方法并绑定

class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onClick={this.run}>button</button></div>)}
}

2、定义方法并访问数据

类中的事件如果直接调用 this并不指向类 想要改变指向有三种写法

（1）使用.bind()将当前this传入方法中

    render() {return (<div><button onClick={this.run}>button</button><br/><button onClick={this.getDate.bind(this)}>获取数据</button></div>)}

（2）在构造函数初始化时将改变方法的this指向

 constructor(props) {super(props)this.state = {msg:'home组件'}this.getDate=this.getDate.bind(this)}getDate(){alert(this.state.msg)}render() {return (<div><h2>{this.state.msg}</h2><button onClick={this.run}>button</button><br/><button onClick={this.getDate}>获取数据</button></div>)}

推荐（3）将方法变为属性  然后赋值给箭头函数

    getDate=()=>{   //getDate为一个属性  通过= 赋值给了一个 ()=>匿名箭头函数alert(this.state.msg)}

3、通过事件方法改变属性的值

使用setState()

  //onClick事件触发setDate=()=>{this.setState({msg:"home组件 更新"})

4、执行方法时传参

通过bind(this,参数1,参数2)方式传参

  setDate=(str1,str2)=>{this.setState({msg:str1})}render() {return (<div><h2>{this.state.msg}</h2><br/><button onClick={this.setDate.bind(this,"张三","李四")}>传参并改变msg</button></div>)}

这篇关于react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---