react绑定this并传参的形式

方式一事件处理函数中直接绑定this并传参

export default class BindThis extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'hello'
        }
    }
    render() {
        return <div>
            <h1>react绑定this并传参的形式</h1>
            {/* bind绑定this 修改了this的指向 this指向了bind函数的第一个参数 */}
            {/* call和apply也能修改this的指向 但是他两修改完毕就马上执行了 而bind不会 */}
            {/* bind中第一个参数是this的指向 第一个参数之后的参数都会当成参数被传递 */}
            <input type="button" value="点击修改msg" onClick={this.changeMessage.bind(this, '33', 'll')}/>
            <h3>msg: {this.state.msg}</h3>
        </div>
    }
    changeMessage(arg1, arg2) {
        this.setState({
            msg: '修改了'+arg1+arg2
        })
    }
}

方式二构造函数中绑定

export default class BindThis extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'hello'
        }
        // 构造函数中绑定this并传参
        // 这里相当于拷贝了一份changeMessage函数 并且修改了拷贝的函数的this指向
        // 但是 原来的changeMessage中的this指向没有被改变 所以需要重新赋值才能改变原来的引用
        this.changeMessage = this.changeMessage.bind(this, 'hello')
    }
    render() {
        return <div>
            <h1>react绑定this并传参的形式</h1>
            <input type="button" value="点击修改msg" onClick={this.changeMessage}/>
            <h3>msg: {this.state.msg}</h3>
        </div>
    }
    changeMessage(arg1) {
        this.setState({
            msg: '修改了'+arg1
        })
    }
}

方式三箭头函数

export default class BindThis extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'hello'
        }
    }
    render() {
        return <div>
            <h1>react绑定this并传参的形式</h1>
            <input type="button" value="点击修改msg" onClick={() => {this.changeMessage('hello 3')}}/>
            <h3>msg: {this.state.msg}</h3>
        </div>
    }
    changeMessage(arg1) {
        this.setState({
            msg: '修改了'+arg1
        })
    }
}