我正在 React 中構建一張可刷卡的卡片。該卡包含 4 張幻燈片。卡片中顯示的值取決于用戶輸入。
首先，我定義了一個這樣的示例物件：
const initialState = { id: '', title: '', name: '', image: ''};
在我的組件中，我正在定義陣列狀態，例如：
const [card, setCard] = useState([initialState]);
我將卡片與用戶輸入欄位并排顯示，以便用戶在撰寫卡片時查看卡片。因此，每當用戶添加/編輯卡的特定值時，他都可以在卡上實時查看它。
我們可以像這樣為每個欄位設定物件的狀態：
<Input id='title' name='title' placeholder="Enter Title" type='text' value={card.title} onChange={handleChange}/>
手柄更換功能：
const handleChange = (e) => {
setCard({ ...card, [e.target.name]: e.target.value });
}
但這對于上述物件陣列是不可能的。那么如何處理這種情況呢？每當用戶刷上一張/下一張卡片時，必須用適當的值填充欄位，以便他可以編輯它們。簡單地說，用戶必須能夠隨時編輯任何欄位。每當用戶添加新卡時，必須將新物件推送到陣列狀態。
完整代碼：
const initialState = { id: '', title: '', name: '', image: ''};
const Home = () => {
const [card, setCard] = useState([initialState]);
const isdisabled = true;
const handleChange = (e) => {
setCard({ ...card, [e.target.name]: e.target.value });
}
const handleAdd = () => {
//TODO
}
return (
<Flex>
<Center>
<Flex bg="white" w="lg" h="420" borderRadius="lg" m="7" p="2" alignItems="center">
<Box w="48" align="center">
<IconButton aria-label='Go to previous' disabled borderRadius="full" bg='gray.200' color='black' icon={<ChevronLeftIcon w={6} h={6}/>} />
</Box>
<Box>
<Image src={card[0].image} w="full" h="44" objectFit="cover" objectPosition="0 0" borderRadius="lg" />
<Heading color="black" size='lg'>{card[0].title}</Heading>
<Text color="black" size='40'>{card[0].namee}</Text>
</Box>
<Box w="48" align="center">
<IconButton aria-label='Go to previous' disabled borderRadius="full" bg='gray.200' color='black' icon={<ChevronRightIcon w={6} h={6}/>} />
</Box>
</Flex>
</Center>
<Flex direction="column" w="lg" gap="4" m="7">
<Input placeholder="Enter Title" value={card[0].title} onChange={handleChange}/>
<Input placeholder="Enter Name" value={card[0].name} onChange={handleChange}/>
<Button onClick={handleClick}>Upload Image</Button>
<Button onClick={handleAdd}>Add another slide</Button>
<Button colorScheme="blue">Done</Button>
</Flex>
</Flex>
)
}
export default Home
如何無縫地做到這一點？任何幫助，將不勝感激。謝謝你。
uj5u.com熱心網友回復：
您可能需要一個額外的狀態變數，指定活動卡
就像是
const [cards, setCards] = useState([initialState]);
const [activeCardIndex, setActiveCardIndex] = useState(0);
handleGotoNext = useCallback(() => {
// you need to also handle not allowing to go beyond the max
setActiveCardIndex(prevActive => prevActive 1);
}, []);
const handleGotoPrevious = useCallback(() => {
// you need to also handle not allowing to go below 0
setActiveCardIndex(prevActive => prevActive - 1);
}, []);
const handleChange = useCallback((e) => {
setCards(prevCards => prevCards.map((card, index) => {
if (index === activeCardIndex) {
return { ...card,
[e.target.name]: e.target.value
}
}
return card;
}));
}, [activeCardIndex]);
const handleAdd = useCallback(() => {
const newCards = [...cards, { ...initialState
}];
setCards(newCards);
setActiveCardIndex(newCards.length - 1);
}, [cards]);
const activeCard = cards[activeCardIndex];
// for the rendering you should use the activeCard constant, instead of cards[n]
return (
<Flex>
...
<Image src={activeCard.image} w="full" h="44" objectFit="cover" objectPosition="0 0" borderRadius="lg" />
...
</Flex>
)uj5u.com熱心網友回復：
@Gabriele Petrioli 的答案是我的問題的完美解決方案，只是需要稍作調整：
添加activeCardIndex到兩個導航處理程式的依賴項串列：
const handleGotoNext = useCallback(() => {
// you need to also handle not allowing to go beyond the max
if(activeCardIndex < cards.length-1){
setActiveCardIndex(prevActive => prevActive 1);
}
}, [activeCardIndex]);
const handleGotoPrevious = useCallback(() => {
// you need to also handle not allowing to go below 0
if(activeCardIndex > 0){
setActiveCardIndex(prevActive => prevActive - 1);
}
}, [activeCardIndex]);
和handleChange功能：
const handleChange = useCallback((e) => {
setCards(prevCards => prevCards.map((card, index) => {
if (index === activeCardIndex) {
return { ...card,
[e.target.name]: e.target.value
}
}else {
return card;
}
}));
}, [activeCardIndex]);
uj5u.com熱心網友回復：
您的卡狀態是物件陣列需要更新陣列第一個物件
const handleChange = (e) => {
const arr = [...card]
arr[0] = {...arr[0], [e.target.name]: e.target.value }
setCard(arr);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/436818.html
標籤：javascript 数组 反应 反应钩子 状态