默认选中单选按钮时如何设置状态?
How to set the state when radio button is by default checked?
你看这里,第一个单选按钮defaultChecked={index === 0}
默认是勾选的。当映射的 variant
对象发生变化时,我正在存储它。onChange
。当用户不做任何更改而只是按添加项时,如何存储 variant
的值?
我无法在内部设置状态 .map
它会导致渲染问题。
const [variantOption, setVariantOption] = useState({});
const [variant, setVariant] = useState([]);
props.selectedCustomItem.variants.map((variant, index) => {
{variant.options.map((option, index) => {
<input
type="radio"
name="variant-select"
id="variant-select"
defaultChecked={index === 0}
value={option.price}
onChange={(e) => {
setVariantOption(option);
setVariant(variant);
}}
/>}
<button
onClick={() => {
props.addFoodItems(variant, variantOption);
}}
>add item</button>
如果您正在使用复选框并且默认情况下第一个被选中,那么您可以使用状态中存在的第一个值初始化您的状态,例如 useState(props.selectedCustomItem.variants[0])
const [variantOption, setVariantOption] = useState();
const [variant, setVariant] = useState(props.selectedCustomItem.variants[0]);
useEffect(() => {
if (variantOption == null && variant && variant.length > 0) {
setVariantOption(variant.options[0]);
}
}, [variantOptions, variant]);
props.selectedCustomItem.variants.map((variant, index) => {
{variant.options.map((option, index) => {
<input
type="radio"
name="variant-select"
id="variant-select"
defaultChecked={index === 0}
value={option.price}
onChange={(e) => {
setVariantOption(option);
setVariant(variant);
}}
/>}
<button
onClick={() => {
props.addFoodItems(variant, variantOption);
}}
>add item</button>
此外,我假设 props.selectedCustomItem.variants
不为空或未定义。
你看这里,第一个单选按钮defaultChecked={index === 0}
默认是勾选的。当映射的 variant
对象发生变化时,我正在存储它。onChange
。当用户不做任何更改而只是按添加项时,如何存储 variant
的值?
我无法在内部设置状态 .map
它会导致渲染问题。
const [variantOption, setVariantOption] = useState({});
const [variant, setVariant] = useState([]);
props.selectedCustomItem.variants.map((variant, index) => {
{variant.options.map((option, index) => {
<input
type="radio"
name="variant-select"
id="variant-select"
defaultChecked={index === 0}
value={option.price}
onChange={(e) => {
setVariantOption(option);
setVariant(variant);
}}
/>}
<button
onClick={() => {
props.addFoodItems(variant, variantOption);
}}
>add item</button>
如果您正在使用复选框并且默认情况下第一个被选中,那么您可以使用状态中存在的第一个值初始化您的状态,例如 useState(props.selectedCustomItem.variants[0])
const [variantOption, setVariantOption] = useState();
const [variant, setVariant] = useState(props.selectedCustomItem.variants[0]);
useEffect(() => {
if (variantOption == null && variant && variant.length > 0) {
setVariantOption(variant.options[0]);
}
}, [variantOptions, variant]);
props.selectedCustomItem.variants.map((variant, index) => {
{variant.options.map((option, index) => {
<input
type="radio"
name="variant-select"
id="variant-select"
defaultChecked={index === 0}
value={option.price}
onChange={(e) => {
setVariantOption(option);
setVariant(variant);
}}
/>}
<button
onClick={() => {
props.addFoodItems(variant, variantOption);
}}
>add item</button>
此外,我假设 props.selectedCustomItem.variants
不为空或未定义。