React学习之旅----事件方法及改变this指向

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;