onClick 函数在 ReactJs on Button 中不起作用

Question

我是 ReactJs 的新手。我正在尝试在按钮上实现 onClick 功能，以更改 <h1> 标记之间的文本。 这是代码

class MessageStateComponent extends Component{

  constructor(){
    super()
    this.state = {
        message: 'Subscribe to NewsLetter'
    }
  }

  changeMessage(){

    this.setState({
        message: 'Thank You'
    })

  }

  render(){
    return (
        <div>
            <h1>{this.state.message}</h1>
            <button onClick = {this.changeMessage}>Subscribe</button>
        </div>
    )
  }

}

export default MessageStateComponent

单击按钮时，我在控制台中收到此错误

TypeError：无法读取未定义的属性“setState”
changeMes​​sage src/components/MessageStateComponent.js:30
27 | 28 |更改消息（）{ 29 |

30 | this.setState({
| ^ 31 |留言：'谢谢' 32 | }) 33 |

编辑：当我改变时

<button onClick = {this.changeMessage}>Subscribe</button> 致
<button onClick = {this.changeMessage()}>Subscribe</button>

我收到此错误：

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

Answer 1

需要在构造函数中绑定函数

constructor() {
  super()
  this.state = {
    message: 'Subscribe to NewsLetter'
  }

  this.changeMessage = this.changeMessage.bind(this)
}

如果您使用create-react-app，它支持类属性，因此您可以将函数更改为将自动绑定它的箭头函数（因为箭头函数没有this 上下文）

如果您使用的是webpack，您可以添加class-properties plugin

changeMessage = () => {
  this.setState({
    message: 'Thank You'
  })
}

在此过程中，如果您可以通过create-react-app 或任何其他插件访问类属性，则可以省略constructor 而只使用类属性

class MessageStateComponent extends Component {
  state = {
    message: 'Subscribe to NewsLetter'
  }

  changeMessage = () => {
    this.setState({
      message: 'Thank You'
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button onClick={this.changeMessage}>Subscribe</button>
      </div>
    )
  }
}