默认选中单选按钮时如何设置状态？

Question

你看这里，第一个单选按钮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>

Answer 1

如果您正在使用复选框并且默认情况下第一个被选中，那么您可以使用状态中存在的第一个值初始化您的状态，例如 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 不为空或未定义。

默认选中单选按钮时如何设置状态？

How to set the state when radio button is by default checked?

javascript

reactjs

radio-button

web-frontend