ReactJS：選中另一個復選框時，取消選中先前選中的復選框

Question

因此，我的代碼位於Advanced.js 。 它生成復選框。

<div>
    <h6>Sellers</h6>
    {
    data.data.map((item, i) => {
        return <div className="custom-control custom-checkbox" key={i}>
                 <input type="checkbox" className="custom-control-input" id={item.slug} name={item.slug} onClick={this.props.filterItems()}/>
                 <label className="custom-control-label" htmlFor={item.slug}>{item.name}</label>
                </div>
    }) 
    }
</div>

這是來自index.js 。 我叫Advanced.js ： <Advanced filterItems={() => this.getBrand}

這是getBrand函數：

getBrand = (e) => {
        var checked = !e ? false : e.target.checked
        var name = !e ? "" : e.target.name
        if(checked){
            this.setState({
                brands: name
            }, () => {
                this.filterSeller()
            })
        }else{
            this.setState({
                brands: ""
            }, () => {


    this.home()
        })
    }

}

發生的事情是，當我選中一個復選框並選中另一個復選框時，兩個都被選中。 像這樣：

我想發生的是，當我選中另一個復選框時，以前選中的復選框應變為未選中狀態。 我怎樣才能做到這一點？ 謝謝！

Answer 1

您應該使用完全適合此用例的radio-buttons https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio