import React, { Component } from 'react';
import '../assets/css/index.css'
// react绑定属性注意点
// class要换成className
// for 要换成htmlFor
// style
class Home extends Component {
constructor() {
super();
// react中定义数据
this.state = {
name: 'react学习之旅',
age: 30,
title: 'react绑定属性例子',
color: 'red',
style: {
color: 'red',
fontSize: '18px'
},
userInfo: {
username: 'react初学者'
}
}
this.getName = this.getName.bind(this)
}
run () {
alert('我是run方法')
}
getData () {
// 直接这样this指向失败
alert(this.state.title)
// 有三种方法
// <button onClick={this.getData.bind(this)}>获取数据方法</button>
}
getName () {
alert(this.state.name)
// 第二种改变this指向的方法
}
// 箭头函数this指向当前实例,这种最常用
getUserName = () => {
alert(this.state.userInfo.username)
}
// 改变同样存在this指向问题
setData = () => {
this.setState({
title: '改变后的title'
})
}
setName = (str) => {
this.setState({
name: str
})
}
render () {
// return <div>你好react</div>
return (
<div>
<h2>react里面所有节点都要被根节点包含起来</h2>
<p>{this.state.name}</p>
<p>{this.state.age}</p>
<p>{this.state.userInfo.username}</p>
<div title={this.state.title}>react绑定属性例子</div>
<div className='red'>绑定样式</div>
<div className={this.state.color}>绑定样式属性</div>
<label htmlFor='name'>姓名</label>
<input id='name' />
<div style={{
'color': 'red'
}}>行内样式使用</div>
<div style={this.state.style}>行内样式使用</div>
<hr />
{/* 调用方法只是this.run,如果要执行run方法,则this.run() */}
<button onClick={this.run}>执行run方法</button>
<button onClick={this.getData.bind(this)}>获取数据方法</button>
<button onClick={this.getName}>获取数据第二种方法</button>
<button onClick={this.getUserName}>获取数据第三种方法</button>
<hr />
<button onClick={this.setData}>改变数据方法</button>
<button onClick={this.setName.bind(this, '改变name')}>执行方法传值</button>
</div >
)
}
}
export default Home;
React学习之旅----事件方法及改变this指向
猜你喜欢
转载自blog.csdn.net/qfxlw/article/details/83107522
今日推荐
周排行