将带有复选框的表更改为带有复选框的“选择”-React.JS

Question

因此，我有此复选框表，它反映了我使用axios函数提取的应用程序名称：

请参阅组件代码：

class Home extends Component {
 selectedApps=[];
 selectedAppsObjArr=[];
state={
        appList:[],
}

 chooseAppSelector=()=>
     {
        let appSelectorArray=[];
        for (let application of this.state.appList)
        {
        appSelectorArray.push(

            <tr>
            <th scope="row"><input type="checkbox" className={"appsCheckbox"}  id={"appSelectorCheckbox"+application.id} onClick={()=>this.checkCheckbox(application.id, application)}/></th> 
            <td>{application.product}</td>
            </tr>
        )
        }
        return appSelectorArray;
     }

复选框验证功能：

checkCheckbox=(appId, application)=>
     {
        let contains=this.selectedApps.includes(appId)
        if (contains==false)
            {
                this.selectedApps.push(appId)
                this.selectedAppsObjArr.push(application)
            }
            else
            {
                let index=this.selectedApps.indexOf(appId);
                this.selectedApps.splice(index,1);
                let index2=this.selectedAppsObjArr.indexOf(appId)
                this.selectedAppsObjArr.splice(index2,1);
            }
     }

    **//CLEARS THE CHECKBOXES AFTER CLOSING THE MODAL**
    handleDone=()=>{

        var clist=document.getElementsByClassName("appsCheckbox");
        for (var i = 0; i < clist.length; ++i) 
        { clist[i].checked = false }
     }
     **//CLEARS THE CHECKBOXES AFTER CLOSING THE MODAL**

render (){

  return (
<Table striped bordered hover> **//Bootstrap component **
                        <thead>
                        <tr>
                        <th>#</th>
                        <th>App</th>
                        </tr>
                        </thead>
                        <tbody>
                        {this.chooseAppSelector()} **// the table content is being created in here**
                        </tbody>
                        </Table>

)
}

}

因此，我需要将其更改为具有以下复选框的选择器：

或者像这样：

或带有复选框的其他选择器：）

我非常感谢您的帮助，因为我对react并不十分熟悉，并且尝试创建它的时间大约为4天：）

非常感谢！