檢查是否在 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 。