我無法從本身包含多個物件欄位的 Obect 中捕獲 onChange 事件。
這是我的 useState 鉤子。
const [train, setTrain] = useState({
trainNumber: "",
trainName: "",
fromStation: "",
toStation: "",
departureDateTime: "",
arrivalDateTime: "",
//unable to capture travelDetails property changes.
travelDetails: {
coachesClass: [
{
availableTickets: "",
travelClass: "",
fare: "",
},
],
},
});
假設我想檢查 travelDetails.coachesClass[0].availableTickets 的 onChange 事件，那么該怎么做呢？
<div className="row">
<label htmlFor="availableTickets">First AC</label>
<div className="col-4">
<input
type="number"
name="availableTickets"
className="form-control"
placeholder="Available Tickets"
required
value={train.travelDetails.coachesClass[0].availableTickets}
onChange={(e) => handleChange(e)}
/>
</div>
這是 onChangeHandler
const handleChange = (e) => {
const { name, value } = e.target;
setTrain((prevState) => {
return {
...prevState,
[name]: value,
};
});
};
它適用于其他領域，但在 travelDetails 中它沒有捕獲更改。
uj5u.com熱心網友回復：
由于您嘗試更新嵌套在物件中的陣列中的屬性，因此需要調整更新狀態的方式。嘗試這樣的事情：
const handleChange = (e) => {
setTrain((prevState) => {
const newCoachesClass = [...prevState.travelDetails.coachesClass];
newCoachesClass[0] = {
...prevState.travelDetails.coachesClass[0],
availableTickets: e.target.value
};
return {
...prevState,
travelDetails: {
...prevState.travelDetails,
coachesClass: newCoachesClass
}
};
});
};
此外，由于您input的number型別，您可能希望初始化availableTickets為數字而不是字串：
const [train, setTrain] = useState({
trainNumber: "",
trainName: "",
fromStation: "",
toStation: "",
departureDateTime: "",
arrivalDateTime: "",
travelDetails: {
coachesClass: [
{
availableTickets: 0,
...
查看此代碼筆以獲取示例：
uj5u.com熱心網友回復：
目前，您的 setState 在狀態物件本身上添加了一個新屬性。由于您似乎希望該資訊更新您的嵌套狀態，請參閱下面的更新片段：
const handleChange = (e) => {
const { name, value } = e.target;
setTrain((prevState) => {
return {
...prevState,
travelDetails: {
...prevState.travelDetails,
coachesClass: [
{
...prevState.travelDetails.coachesClass[0],
[name]: value
}
]
}
};
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466120.html
標籤：javascript 反应 打字稿 反应钩子 改变