学习react day04 ref和state

07 ref

import React, { Component } from 'react'

export default class App extends Component {
  myref = React.createRef()
  render() {
    return (
      <div>
        <input ref="mytext1"/>

        <input ref = {this.myref}/>

        <button onClick={()=>{
            // console.log('click1', this.refs.mytext1.value)  // 已弃用
            console.log('click', this.myref.current.value)
        }}>add1</button>

        <button onClick={this.handleClick2}>add2</button>
      </div>
    )
  }

  handleClick2=()=>{
    console.log('click', this.myref.current.value)

  }
}

08 state

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        mytext:'收藏',
        myShow:true
    }
  render() {
    return (
      <div>
        <h1>react开发</h1>

        <button onClick={()=>{
            this.setState({myShow:!this.state.myShow})
            if(this.state.myShow){
                console.log('收藏成功')
            }else{
                console.log('取消收藏')
            }
        }}>{this.state.myShow?'收藏':'取消收藏'}</button>
      </div>
    )
  }
}