我正在创建一个随机报价生成器。有一个显示报价和作者姓名的报价框。我创建了一种方法来调用按钮,单击可以使报价列表随机化并显示新报价,并显示一个下一个按钮以从报价列表中获取下一个报价。我可以看到第一个引号,但是该组件没有在单击按钮时重新渲染,或者发生了某些错误,导致我无法获得下一个引号或无法随机化。这是代码:
class UI_qoutebox extends React.Component {
constructor(props) {
super(props);
this.state = { qoutes: props.qoutes, authors: props.authors, num: 0 };
this.UI_rq = this.UI_rq.bind(this);
this.UI_next = this.UI_next.bind(this);
}
UI_rq() {
let rnd = Math.floor(Math.random() * this.state.qoutes.length);
this.setState({ num: rnd });
}
UI_next() {
let p = this.state.num + 1;
if (p > this.state.qoutes.length) { p = 0 }
this.setState({ num: p })
}
render() {
const { qoutes, authors, num } = this.state;
return (
<div className="qoute-box">
<span className="qoute">{qoutes[num]}</span>
<span>{authors[num]}</span>
<input type="button" value="Randomize" onClick={() => this.UI_rq} />
<input type="button" value="Next" onClick={() => this.UI_next} />
</div>
)
}
}
我正在从事Freecodecamp的项目,我需要快速帮助。预先感谢。
答案 0 :(得分:2)
更改此
<input type="button" value="Randomize" onClick={this.UI_rq}/>
<input type="button" value="Next" onClick={this.UI_next}/>