当我点击 New Number 按钮 时,我得到一个从 0 到 15 的随机数...这工作正常,但现在我想要当我点击 Previous Number 按钮 , 它给了我以前的数字/状态。
例如..
一旦渲染运行,我得到 12。然后我点击 New Number 按钮 给我 4,现在我想要当我点击 Previous Number 时改变状态和给我之前状态下的数字,是4。 如何实现这个功能...
我知道 componendDidUpdate 有 prevProp 和 prevState 参数,但不知道如何在点击时调用它。 这是我的代码
class App extends React.Component {
state = {
randomNum: ''
}
componentDidMount() {
this.getNewRandomNum()
}
getNewRandomNum = () => {
let randomNum = Math.floor(Math.random() * 15)
this.setState({ randomNum })
console.log(this.state.randomNum)
}
prevNum = () => {
}
render() {
return (
<div>
<h1>{this.state.randomNum}</h1>
<button onClick={this.getNewRandomNum}>New Number</button>
<button onClick={this.prevNum}>Previous Number</button>
</div>
)
}
}
非常感谢您的帮助,希望我说清楚了。
最佳答案
创建一个额外的状态值,如 previousNum,并在调用 getRandomNum 时用 prevState 更新它。
class App extends React.Component {
state = {
randomNum: "",
previousNum: ""
};
componentDidMount() {
this.getNewRandomNum();
}
getNewRandomNum = () => {
let randomNum = Math.floor(Math.random() * 15);
this.setState(
prevState => {
return {
randomNum: randomNum,
previousNum: prevState.randomNum
};
},
() => console.log(this.state)
);
};
getPreviousNum = () => {
this.setState({
randomNum: this.state.previousNum,
previousNum: ""
}, () => console.log(this.state));
};
render() {
return (
<div>
<h1>{this.state.randomNum}</h1>
<button onClick={this.getNewRandomNum}>New Number</button>
<button
onClick={this.getPreviousNum}
disabled={typeof(this.state.previousNum) === "number" ? false : true}
>
Previous Number
</button>
</div>
);
}
}
关于javascript - 如何在reactjs中获取以前的状态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56119868/