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;