import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Hello extends Component {
  constructor(){
    super()
    this.state = {}
  }
  // 绑定事件需要使用驼峰的方式
  render() { 
    return (
      <div onClick={function() {console.log('ok')}}>
        Test
        <button onClick={this.myClick}>按钮1</button>
        <button onClick={()=> this.show('传参')}>按钮2</button>
      </div>
    )
  }

  // <button onClick={this.myClick()}></button> 
  // 如果加小括号 等于直接调用 不需要点击的
  // 因为render也在生命周期中 使用这个组件的时候 就相当于创建了一个实例 
  // 这个组件实例必然就会调用render函数 必然就会解析return 的虚拟dom
  // 在解析这个应该存放变量的地方的时候 这个函数没有return值 但是这行必然会随着解析而执行
  // 所以这么写 不点击也会触发 
  myClick() {
    console.log('ok2')
  }

  show = (arg1) => {
    console.log(arg1) // '传参'
  }
  // show这种绑定事件的方法最常用
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    // handleClick 当做函数指针
    this.handleClick = this.handleClick.bind(this);
  }
  render(){
    return <div onClick={this.handleClick}></div>
  }

  handleClick() {
    console.log('111')
  }
}

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Hello extends Component {
  constructor(){
    super()
    this.state = {
      msg:"哈哈哈",
      num: 1
    }
  }

  render(){ 
    return (
      <div>
        <button onClick={()=> this.show()}>按钮2</button>
        <p> { this.state.msg }</p>
      </div>
    )
  }

  show = () => {
    // 不能直接赋值来修改（不会立即渲染视图） 应该使用setState方法
    // this.state.msg = '你好'

    this.setState({ msg: "你好" }) 
    // 只会修改对应的状态msg  并不会影响到state中的num属性 

    console.log(this.state.msg) // '哈哈哈'
    // 因为 this.setState() 是异步更新DOM的 console语句会率先执行完毕

    // 如果想立即使用修改后的值 应该使用setState的第二个参数：回调函数
    // 这个回调函数修改完成后 被调用 == vue.$nextTick()
    this.setState({ msg: "show" }, function(){
      console.log(this.state.msg) // show
    }) 
  }
}

// React 默认只有单向数据流 没有像v-model那样的双向数据绑定
// React中 如果将表单元素中的value与state中的数据绑定
// 当状态(state中的数据)变化的时候 --> 会触发页面的更新
// 但是 在页面触发改变的时候(文本框输入的时候) 不会同步state中的数据更新
// 需要程序员绑定onChange事件拿到最新的文本框中的值 
// 手动调用this.setState()去更新state中的数据
import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class Hello extends Component {
  constructor(){
    super()
    this.state = {
      msg:"哈哈哈",
    }
  }
  
  render() { 
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={(e)=>this.changeValue(e)} ref="txt"/>
        <input type="text" ref={el=>this.myInput = el}/>
      </div>
    )
  }
  // 设置ref为字符串是过时了的API 应该设置为一个回调函数

  changeValue = (e)=> {
    this.setState({
      msg: e.target.value 
    })
    // 或者使用ref属性暴露dom元素
    // this.setState({
    //     msg: this.refs.txt.value
    // })
  }
}