我嘗試在更改時更改復選框狀態，但它沒有改變。它看起來像這張照片。這是我的初始狀態
const initialState = {
isLoading: false,
showAlert: false,
products: [],
totalProducts: 0,
numOfPages: 1,
select: false,
};
這是我的背景關系代碼
const toggleProduct = (e) => {
const id = e.target.id;
dispatch({ type: TOGGLE_PRODUCT, payload: { id } });
};
減速器
if (action.type === TOGGLE_PRODUCT) {
return {
...state,
products: state.products.map((product) => {
if (product._id === action.payload.id) {
return { ...product, select: !state.select };
} else {
return product;
}
}),
};
}
以及如何查看輸入
<input
type='checkbox'
name={name}
defaultChecked={select}
id={_id}
onChange={toggleProduct}
/>
如果輸入只是檢查它不起作用，則不會選擇輸入，但如果 defaultChecked 我可以選擇輸入但狀態不會更改（請查看螢屏截圖）。提前致謝
uj5u.com熱心網友回復：
@jsN00b 在評論中正確說明，所有四個產品的檢查狀態都由一個受控元素控制，即select key，但通常，每個產品都應該有自己的 select 屬性，如下所示：
const initialState = {
isLoading: false,
showAlert: false,
products: [
// hard code the data for now
{_id: 1, productName: "productOne", select: false},
{_id: 2, productName: "productTwo", select: false},
{_id: 3, productName: "productThree", select: false},
],
totalProducts: 0,
numOfPages: 1
// select: false, ? we don't need select in here now
};
// reducer
if (action.type === TOGGLE_PRODUCT) {
return {
...state,
products: state.products.map((product) => {
if (product._id === action.payload.id) {
return { ...product, select: !product.select }; // only toggle select for THE product
} else {
return product;
}
}),
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457642.html
標籤：反应