2.事件以及事件传参

4.1改变this指向问题

//1.改变事件内部this指向的问题  bind(this)
render(){
    return(     //执行事件时必须要加上bind   bind(this)改变this关键字的指向问题
      <div onClick={this.handleClick.bind(this)}>{this.state.msg}</div>
    )
  }  //事件直接写
  handleClick(){
    this.setState({
      msg:"change"
    })
  }

//2.使用箭头函数  改变this指向问题
  render(){
    return(
      <div onClick={this.handleClick}>{this.state.msg}</div>
      <input onKeyUp={this.handleKeyUp}></input>
    )
  }
  handleClick=()=>{
    this.setState({
      msg:"change"
    })
  }
  handleKeyUp=(value)=>{
    console.log(value.keyCode)
  }

4.2事件传参

//Tips:传递参数一定要加bind(this,params)   params:要传递的参数
render(){
    return(
      <div onClick={this.handleClick.bind(this,"101")}>{this.state.msg}</div>
    )
  }
   handleClick=(id)=>{
    console.log(id)
    this.setState({
      msg:"change"
    })
  }

例题 传id

 render() {
   return (
     <div className="container">
       {this.state.playlists.map(item=>{
         return(<div className="list" key={item.id}
            onClick={this.handleClick.bind(this,item.id)}>
            <img className="pic" src={item.coverImgUrl}></img>
           <p className="title">{item.name}</p>
           </div>)
          })}
    </div>
    ); 
    }
     handleClick=(id)=>{
        this.props.history.push(`/musicdetail?id=${id}`)
    }