我正在嘗試創建一個反應應用程式，您可以在其中按下按鈕，它會為您提供約會之夜選項和相應的影像。我在 dates.js ex 中創建了一個小物件陣列：
export const dates = [
{
id: 0,
name: "Comedy Club",
image: "/assets/images/comic.jpg",
},
{
id: 1,
name:"Piano Bar ",
image: "/assets/images/piano-bar.jpg",
},
然后我創建了一個 GetDates.js 來使用隨機方法和相應的 onclick 事件。下面是我卡住的地方。我已經根據以前的各種答案和 youtube 教程更改了此代碼 100 次，但我收到錯誤，或者它們不完全是我想要呈現的內容。您能否從上次更新中告訴我根據下面使用的 randomId 方法顯示 dates.name 和 dates.image 需要什么？再一次，我已經從我最初的嘗試中改變了很多，我不確定這是最好的方法。任何建議將不勝感激！
class GetDates extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
image: "",
};
}
randomSelect() {
const randomId = dates[Math.floor(Math.random() * dates.length)].id;
this.setState({ ...this.props.dates[randomId] });
}
render() {
return (
<div className="results-container">
<button className="date-btn" onclick={this.randomSelect}>
GET DATE IDEAS!
</button>
</div>
);
}
}
export default GetDates;
uj5u.com熱心網友回復：
onClickprop在 React中呼叫，而不是onclick（如 HTML 屬性）。您還應該渲染當前未選擇的專案。通常，您還應該使用功能組件而不是類組件。還要小心，this因為它可能不是指您認為它所做的事情。當您使用陣列函式() => setCurDate()時，您可以確保它this被正確系結。我建議您閱讀MDN 檔案以了解“this”的原因以及您可以采取哪些措施來防止它發生。
這是一個解決上述所有問題的簡單實作。
const dates = [
{
id: 0,
name: "Comedy Club",
image: "https://dummyimage.com/600x100/000/fff&text=Comedy Club",
},
{
id: 1,
name: "Piano Bar ",
image: "https://dummyimage.com/600x100/000/fff&text=Piano Bar",
},
];
function GetDates() {
// state for the currently selected item
const [curDate, setCurDate] = React.useState(randomSelect());
function randomSelect() {
// select one item at random (it is possible that the same image is selected more than once in a row)
const selected = Math.floor(Math.random() * dates.length);
return dates[selected];
}
return (
<div className="results-container">
{/* onClick update the state by creating a copy of the object to trigger a state update */}
<button className="date-btn" onClick={() => setCurDate({...randomSelect()})}>
GET DATE IDEAS!
</button>
{/* Render the currently selected item */}
<h3>{curDate.name}</h3>
<img src={curDate.image} />
</div>
);
}
ReactDOM.render(<GetDates />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
如果單擊按鈕時出現錯誤，則可能是由于randomSelect方法未系結到類。
嘗試在建構式中添加系結呼叫，這樣您將擁有：
constructor(props) {
...
this.randomSelect = this.randomSelect.bind(this);
}
您可以在此處閱讀更多資訊：https ://reactjs.org/docs/handling-events.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480991.html
上一篇：回傳所有寵物名稱的陣列
下一篇：forEach物件值等于未定義