我有兩個組件，即“SectionFruits”和“ToggleFruit”以及一個名為“selectedFruits”的狀態，它是一個物件陣列，如下所示：
useState([
{
name: 'Apple',
price: '',
quantity: '',
},
{
name: 'Mango',
price: '',
quantity: '',
},
])
'ToggleFruit' 是一個組件，它具有添加/洗掉水果屬性（名稱、價格、數量）的邏輯，如下所示：
import React, { useState, createRef } from "react";
import styled from "styled-components";
const StyledToggleFruit = styled.div`
margin-bottom: 12px;
& > div {
display: flex;
align-items: center;
input[type="checkbox"] {
margin: 0;
}
h6 {
margin: 0;
cursor: pointer;
color: coral;
}
}
aside {
display: flex;
margin-top: 2px;
input {
margin-right: 8px;
}
}
`;
const ToggleFruit = ({
Id,
state,
setState,
ischecked,
label,
price,
quantity
}) => {
const toggleRef = createRef();
const [priceValue, setPriceValue] = useState(price);
const [quantityValue, setQuantityValue] = useState(quantity);
const [checkedState, setCheckedState] = useState(
ischecked ? ischecked : false
);
const handleToggle = (e) => {
setCheckedState(!checkedState);
if (state.some((object) => object.name.includes(label))) {
const removeFruitArr = state.filter((item) => item["name"] !== label);
setState(removeFruitArr);
} else {
setState((prevState) => [
...prevState,
{
name: label,
price: priceValue,
quantity: quantityValue
}
]);
}
};
return (
<StyledToggleFruit>
<div onClick={handleToggle}>
<div>
<input
ref={toggleRef}
onChange={handleToggle}
ischecked={ischecked && ischecked.toString()}
checked={checkedState}
type="checkbox"
/>
</div>
<h6>{label}</h6>
</div>
{checkedState && (
<aside>
<input
required
onChange={(e) => setPriceValue(e.target.value)}
value={priceValue}
type="text"
placeholder="Price"
/>
<input
required
onChange={(e) => setQuantityValue(e.target.value)}
value={quantityValue}
type="text"
placeholder="Quantity"
/>
</aside>
)}
</StyledToggleFruit>
);
};
export default ToggleFruit;
'SectionFruits' 只是在 FRUITS 上運行一個映射，并在 DOM 中呈現它們。我面臨兩個問題：
- 狀態中水果的切換（添加/洗掉）行為例外
- 價格和數量沒有被添加到狀態
沙盒鏈接：https : //codesandbox.io/s/festive-haze-5ono9
uj5u.com熱心網友回復：
我在 上編輯了一些您的代碼codesandbox，請查看：https : //codesandbox.io/s/upbeat-estrela-5yqbs?file=/src/components/ToggleFruit.js :
660-676
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397920.html
標籤：javascript 反应
上一篇：獲取div內字串的行數