React 进阶之路(四)

之前的文章我们介绍了  React 绑定属性( 绑定class  绑定style)、引入图片  循环数组渲染数据。接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值。

1 import React, {Component} from 'react'; 2 3 class Home extends Component { 4 constructor(props) { 5 super(props); 6 this.state = { 7 name: "zhangsan", 8 }; 9 10 this.getData2 = this.getData2.bind(this); 11 } 12 13 getData1() { 14 console.log(this.state.name) 15 } 16 17 getData2() { 18 console.log(this.state.name) 19 } 20 21 getData3 = () => { 22 console.log(this.state.name) 23 } 24 25 setData = (name) => { 26 this.setState({ 27 name: name 28 }) 29 } 30 31 render() { 32 return ( 33 <div> 34 <p>Hello {this.state.name}</p> 35 36 <button onClick={this.getData1.bind(this)}>获取数据1</button> 37 <button onClick={this.getData2}>获取数据2</button> 38 <button onClick={this.getData3}>获取数据3</button> 39 <button onClick={this.setData.bind(this, "lisi")}>改变数据</button> 40 </div> 41 ); 42 } 43 } 44 45 export default Home;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpsdwz.html