为什么按钮没有从 x 更改为 y？

Question

>我正在尝试制作一个在x和y之间切换的按钮。但是，以下代码不起作用。为什么这不起作用？抱歉，如果这是一个简单的解决方案，我是新手。

现在，出现的只是一个显示X的按钮，当我尝试单击它时，没有任何变化。

constructor(props) {
super(props);
this.myValue = 2
}
buttonIsClicked() {
this.myValue+=1
this.render()
}
render() {
switch(this.myValue%2) {
case 0:
return(
<button className = "myButton" onClick={() => this.buttonIsClicked()}>X</button>
);
case 1:
return(
<button className = "myButton" onClick={() => this.buttonIsClicked()}>Y</button>
);
}
}

Answer 1

在 React 中，你不能使用对象属性作为组件状态。

constructor(props) {
super(props);
this.state = { counter: 0 };
}
buttonIsClicked() {
this.setState({ counter: this.state.counter + 1 });
}
render() {
switch(this.state.counter%2) {
case 0:
return(
<button className = "myButton" onClick={() => this.buttonIsClicked()}>X</button>
);
case 1:
return(
<button className = "myButton" onClick={() => this.buttonIsClicked()}>Y</button>
);
}
}

此外，不能直接调用生命周期方法(例如渲染(。

如果我是你，我会从阅读 React 的文档开始，以避免类似的错误。

Answer 2

检查一下为什么this.render()实际上并没有触发重新渲染。查看此操作效果的更好方法是将变量移动到状态，然后调用this.setState()

Answer 3

React 使用状态来确定其组件的变化。查看官方文档以了解有关生命周期和状态管理的更多信息：https://reactjs.org/docs/state-and-lifecycle.html

constructor(props) {
super(props);
// init the state
this.state = { myValue: 2 };
}
buttonIsClicked() {
// accessing state
const lastValue = this.state.myValue;
// updating state which will trigger rendering
this.setState({ myValue: lastValue + 1 });
}
render() {
switch(this.state.myValue%2) {
case 0:
return(
<button className = "myButton" onClick={() => this.buttonIsClicked()}>X</button>
);
case 1:
return(
<button className = "myButton" onClick={() => this.buttonIsClicked()}>Y</button>
);
}
}