React Render无法从组件内部工作

Question

我正在创建一个简单的React组件，它在单击按钮时更新自己的数据。令人困惑的是，html不是自动更新的，所以我手动调用render()函数。但即使这样也不会更新html。如何告知react以重新渲染组件？

class Ideas extends React.Component {
constructor() {
super()
this.title = "My ideas"
}
changeIdeas(){
this.title = "No more ideas for today"
// how to re-render the new title? This is not working
this.render()
// also not working
ReactDOM.render(<Ideas/>, window.root)
}
render() {
return (
<div>
<h1>{this.title}</h1>
<button onClick={this.changeIdeas}>Change ideas</button> 
</div>                          
)
}
}
ReactDOM.render(<Ideas/>, window.root);

Answer 1

您需要将标题存储在状态中，而不是将其保存为实例变量。这将确保React跟踪变量，并且组件在更改时将正确更新。

constructor() {
super()
this.state = { title: "My ideas" }
}
changeIdeas = () => {
this.setState({
title: "No more ideas for today"
});
}
render() {
return (
<div>
<h1>{this.state.title}</h1>
<button onClick={this.changeIdeas}>Change ideas</button> 
</div>                          
)
}