[JavaScript知识库]react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

1、定义方法并绑定

class News extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
           msg:'home组件'
        }
    }
    run(){
        alert("我是一个run") //方法写在类中
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button onClick={this.run}>button</button>
            </div>
        )
    }
}

2、定义方法并访问数据

类中的事件如果直接调用 this并不指向类 想要改变指向有三种写法

（1）使用.bind()将当前this传入方法中

    render() {
        return (
            <div>
                <button onClick={this.run}>button</button>
                <br/>
                <button onClick={this.getDate.bind(this)}>获取数据</button>
            </div>
        )
    }

（2）在构造函数初始化时将改变方法的this指向

 constructor(props) {
        super(props)
        this.state = {
           msg:'home组件'

        }
        this.getDate=this.getDate.bind(this)
    }
  getDate(){
        alert(this.state.msg)
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>

                <button onClick={this.run}>button</button>
                <br/>
                <button onClick={this.getDate}>获取数据</button>
            </div>
        )
    }

推荐（3）将方法变为属性? 然后赋值给箭头函数

    getDate=()=>{   //getDate为一个属性  通过= 赋值给了一个 ()=>匿名箭头函数
        alert(this.state.msg)
    }

3、通过事件方法改变属性的值

使用setState()

  //onClick事件触发
  setDate=()=>{
        this.setState({
            msg:"home组件 更新"
        })

4、执行方法时传参

通过bind(this,参数1,参数2)方式传参

  setDate=(str1,str2)=>{
        this.setState({
            msg:str1
        })
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <br/>
                <button onClick={this.setDate.bind(this,"张三","李四")}>传参并改变msg</button>
            </div>
        )
    }