检查是否在 React 中选中了几个单选按钮组

Question

我正在实现一个带有购物车的简单电子商务。 在我的项目中，会有一个页面显示单个产品的所有详细信息。 其中将有多个不同属性的选择，这将是单选按钮。 例如，iPhone 13 具有颜色和容量等属性。 这些属性来自 GraphQL 端点。

我想要做的是创建一个添加到购物车按钮。 在将产品添加到购物车之前，必须检查所有属性。

这是我用于呈现属性的代码。

    {this.state.product.attributes.map(attribute=>{
    return (
        <>
            <h5>{attribute.name.toUpperCase() + ":"}</h5>
            <>
                {attribute.items.map(item =>{
                    return (
                        <>
                            <input onClick={()=>{}} type="radio" id={item.id + " " + attribute.name} name={attribute.name} value={item.value}/>
                            <label htmlFor={item.id + " " + attribute.name}>{item.displayValue}</label>
                        </>
                    )
                })}
            </>
        </>
    )
})}

另外，这是我的按钮代码

<button onClick={()=>{addProduct(this.props.id, this.state.product.prices)}}>ADD TO CART</button>

让我知道我该怎么做？

Answer 1

如果没有看到您的组件的 rest，很难说出您应该做什么。 但是，我强烈建议您查看有关 forms 的 React 文档。 也就是说，您可能希望在受控组件上查看他们的示例，以跟踪每个属性的state 。