Question

我才刚刚开始学习React.js（和Javascript），对你们来说我有一个非常基本的问题。

这是一个小组件的工作示例，该组件创建3个按钮，每次单击该按钮都会增加一个值。

class Button extends React.Component {

handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
}
render(){
    return(
    <button onClick={this.handleClick}>
        {this.props.incrementValue}
    </button>
    );
    }
}

const Result = (props) => {
    return(
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
    state = {counter: 0};
  incrementCounter = (incrementValue) => {
    this.setState((prevState) => ({
            counter: prevState.counter + incrementValue
    }));
    };

    render() {
    return (
        <div>
        <Button incrementValue={2} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={99} onClickFunction={this.incrementCounter}/>
      <Result counter={this.state.counter}/>
    </div>
    );  
  }
}

ReactDOM.render(<App />, mountNode);

在体验代码的同时，我尝试更改handleClick函数。

class Button extends React.Component {

handleClick(){
    this.props.onClickFunction(this.props.incrementValue);
}
render(){
    return(
    <button onClick={this.handleClick}>
        {this.props.incrementValue}
    </button>
    );
    }
}

const Result = (props) => {
    return(
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
    state = {counter: 0};
  incrementCounter = (incrementValue) => {
    this.setState((prevState) => ({
            counter: prevState.counter + incrementValue
    }));
    };

    render() {
    return (
        <div>
        <Button incrementValue={2} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={99} onClickFunction={this.incrementCounter}/>
      <Result counter={this.state.counter}/>
    </div>
    );  
  }
}

ReactDOM.render(<App />, mountNode);

我现在得到：未捕获的TypeError：无法读取未定义的属性'props' 在handleClick（评估为

据我所知，匿名函数 handleClick =（）=> ... 可以由于闭包而从父级访问道具，但是当我用类替换魔术时为什么魔术会停止呢？方法？

Answer 1

您的问题似乎与闭包无关，而与this在JS中的工作方式有关。在您的工作示例中

handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
}

您具有箭头功能，因此，this始终指向您的实例，这就是为什么您可以访问this.props的原因。

在您的非工作示例中

handleClick(){
    this.props.onClickFunction(this.props.incrementValue);
}

您不再具有箭头功能，因此this现在不再在调用该函数时引用您的实例。这就是为什么您无法访问this.props。

您可以像在工作案例中那样使用箭头函数来解决此问题，或者可以将函数绑定到当前实例，以确保this始终指向您的实例。

闭包在类方法上的工作方式是否相同？

1 个答案: