我正在撰寫一個非常簡單的程式，但我遇到了一個小問題。當我在輸入標簽中寫一個新的預兆時，我想將它添加到處于狀態的陣列并在警報框中顯示陣列的全部內容。我怎樣才能以最簡單的方式做到這一點？
class Draw extends React.Component {
state = {
omen: "",
omens: ["first", "second", "third"],
newOmen: "",
};
handleRandomOmen = () => {
const omensArray = this.state.omens;
const randomOmen =
omensArray[Math.floor(Math.random() * omensArray.length)];
this.setState({
omen: randomOmen,
});
};
handleChange = (e) => {
this.setState({
newOmen: e.target.value,
});
};
handleAddOmen = () => {
const test = this.state.omens.push(this.state.newOmen);
console.log(test);
};
render() {
return (
<div className="app">
<button onClick={this.handleRandomOmen}>Show omen</button>
<br />
<input
type="text"
value={this.state.newOmen}
onChange={this.handleChange}
/>
<button onClick={this.handleAddOmen}>Add omen</button>
<h1>{this.state.omen}</h1>
</div>
);
}
}
ReactDOM.render(<Draw />, document.getElementById("root"));uj5u.com熱心網友回復：
你總是需要用 更新狀態setState，添加一個新的陣列值push將被下一個反應周期覆寫。
您可以使用spread 語法創建一個具有舊值 新值的新陣列：
handleAddOmen = () => {
this.setState({
omens: [
...this.state.omens,
this.state.newOmen
]
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/340786.html
標籤：javascript 反应
上一篇：Document.write("*");for回圈在“*”金字塔的末尾回傳一個未定義的值？
下一篇：用多個字串變數填充JSON