Question

我有一个父组件和子组件，父组件包含子组件。它们具有相同的counter状态：

import React from 'react';

class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 100
        }
    }
    render = () => {
        return (
            <div>
                <h2>{this.state.counter}</h2>
                <button onClick={this.props.clickHandler.bind(this)}>Click</button>
            </div>
        )
    }
}

export default class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
    }
    addCounter = () => {
        this.setState({
            counter: ++this.state.counter
        })
    }
    render = () => {
        return (
            <div>
                <h1>{this.state.counter}</h1>
                <Child clickHandler={this.addCounter} />
            </div>
        )
    }
}

我将addCounter处理程序从父级传递给子级，我认为addCounter的上下文可以通过bind方法从父级更改为子级，然后单击按钮，子项中的计数器将增加，而不是父计数器状态。

但事实是，无论clickHandler绑定null还是this，该函数只会增加父级状态计数器。

那么我的想法有什么不对，为什么情境不会发生变化？

Answer 1

这是因为你正在使用箭头功能。箭头功能的目的之一是保持＆＃34;这个＆＃34;父母的。 This should explain it.

变化：

addCounter = () => { //your code}

要：

addCounter () {//your code}

Answer 2

由于您已通过ES6 arrow function syntax定义了addCounter，因此this已隐式绑定到父对象。您可以再次绑定该函数，但这不起作用，因为绑定已经到位。

React.js：混淆`this`关键字上下文

2 个答案: