这在React类函数[duplicate]中为null

Question

我将我的React类从ES5重构到ES6，现在当我单击一个按钮调用this.state.dispatch（logIn（this.state.logIn））时，行开头的初始this为空。太奇怪了。

这是我的课：

class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            panelIsOpen: false,
            registration: {},
            login: {},
        };
    }

    signUp() {
        this.props.dispatch(signUp(this.state.registration));

        this.setState({
            registration: {},
        });
    }

    logIn() {
        debugger; // this is `null here`
        this.props.dispatch(logIn(this.state.login));

        this.setState({
            login: {},
        });
    }

    togglePanel(e) {
        this.setState({ panelIsOpen: !this.state.panelIsOpen} );
    }

    render() {
        const {elements} = this.props;
        const {registration, login} = this.state;

        return (
            // some stuff 
        );
    }
};

Home.propTypes = {
    elements: React.PropTypes.array,
    dispatch: React.PropTypes.func,
    user: React.PropTypes.object,
};

const mapStateToProps = ({elements, auth}) => {
    return {
        elements: getElementsByKeyName(elements, 'visibleElements'),
        user: getLoggedInUser(auth),
    };
};

Home = DragDropContext(HTML5Backend)(Home);
export default connect(mapStateToProps)(Home);

单击登录按钮调用登录功能，但由于某种原因，this为null

谢谢你看一下

Answer 1

这（并非双关语）与ES6中函数的绑定方式有关。如果将方法作为道具传递给另一个组件，则不能保证它运行的上下文是正确的上下文（除非先绑定它）。下面是一篇文章，内容很长，但很有趣：http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

简而言之，您有两种选择：

>

（很常见/流行）在构造函数中将你的方法绑定到这个。您可能不需要绑定所有方法——这取决于它们的使用方式。

constructor(props) {
    super(props);
    this.state = {
        panelIsOpen: false,
        registration: {},
        login: {},
    };
    this.signUp = this.signUp.bind(this);
    this.signUp = this.logIn.bind(this);
    this.togglePannel = this.togglePannel.bind(this);
} 

将方法定义为箭头函数，它将为您将其绑定到当前范围-无需在构造函数中绑定它们：

class Home extends Component {
    // ...

    signUp = () => {
        this.props.dispatch(signUp(this.state.registration));

        this.setState({
            registration: {},
        });
    }

    // ...
}

Answer 2

React不会绑定添加到ES6类的方法的上下文，除非它们是标准React生命周期的一部分（componentWillReceiveProps，componentDidMount，等等）。

这意味着您需要手动绑定this的值，用于您的SignUp、logIn和togglePanel方法，或者将它们声明为继承父上下文的箭头函数。

1.

constructor(props) {
  super(props);
  this.signUp = this.signUp.bind(this);
  this.logIn = this.logIn.bind(this);
  this.togglePanel = this.togglePanel.bind(this);

  this.state = {
    panelIsOpen: false,
    registration: {},
    login: {},
  }

或者

2.

signUp = () => {
  this.props.dispatch(signUp(this.state.registration));

  this.setState({
    registration: {},
  });
}

// the same for logIn and togglePanel

如需参考，请参阅文档。