英文:
Cannot change the state of a react component using setState() method
问题
以下是已翻译的代码部分：
class MyComponent extends React.Component{
constructor(props)
{
super(props);
this.state ={
content: "初始内容"
};
}
clickHandler()
{
this.setState({
content: "最终内容"
})
console.log("点击了")
}
render()
{
return (
<div>
<h1>状态中的内容是：{this.state.content}</h1>
<button onClick={this.clickHandler} >点击我</button>
</div>
);
}
}
请注意，代码中的双引号已经被正确翻译为中文，同时代码的结构和功能没有问题。
英文:
I am a beginner and I am trying to see how stateful components work in react. I have implemented a simple functionality where I would click a button and change the state of the content that I am rendering on the DOM.
But, after using the setState method in the event handler, the output doesn't give the desired results.
Here is the code -
class MyComponent extends React.Component{
constructor(props)
{
super(props);
this.state ={
content: "Initial Content"
};
}
clickHandler()
{
this.setState({
content: "Final Content"
})
console.log("Clicked")
}
render()
{
return (
<div>
<h1>The content inside the state is: {this.state.content}</h1>
<button onClick={this.clickHandler} >Click Me</button>
</div>
);
}
}
Please correct me if there are some issues in the code
答案1
得分: 1
代码几乎正确。您只需要绑定事件处理程序，以确保在事件处理程序内部this引用组件实例。以下是更新后的版本：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
content: "Initial Content"
};
// 将事件处理程序绑定到组件实例
this.clickHandler = this.clickHandler.bind(this);
}
clickHandler() {
this.setState({
content: "Final Content"
});
console.log("Clicked");
}
render() {
return (
<div>
<h1>状态内的内容是：{this.state.content}</h1>
<button onClick={this.clickHandler}>点击我</button>
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.querySelector("#root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
英文:
The code is almost correct. You just need to bind the event handler, to ensure that this refers to the component instance within the event handler.
Here is the updated version:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
content: "Initial Content"
};
// Binding the event handler to the component instance
this.clickHandler = this.clickHandler.bind(this);
}
clickHandler() {
this.setState({
content: "Final Content"
});
console.log("Clicked");
}
render() {
return (
<div>
<h1>The content inside the state is: {this.state.content}</h1>
<button onClick={this.clickHandler}>Click Me</button>
</div>
);
}
}
ReactDOM.render(<MyComponent />,document.querySelector("#root"));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论