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'
  changeMessage src / components / MessageStateComponent.js：30
  27 | 28 | changeMessage（）{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>
    )
  }
}

onClick函数在Button上的ReactJs中不起作用

编辑：当我更改

1 个答案: