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，它是针对此用例ansible inventory而专门制作的