React Bootstrap表中的多个复选框

Question

在React Bootstrap表中实现了多个复选框，但是当我选中该复选框时，它就会被选中，如果我搜索并在已选中的表中消失了，请.... help ..这就是我所做的。

class xyz extends Component {

action(cell, row) {    
    return(
        <div class="col-auto">
            <Checkbox   row = {row}/>//call the checkbox class
        </div>   
    )
}

render() {  
    return (         
        <form role="form" method="post" action={"/xyz/?token=" + cookies.get('qtoken')}>
            <div class="col-6">
                <div className="form-group">
                    <label>Title</label>
                    <input type="text" className="form-control" placeholder="Enter Title " name="title" onChange={this.namechange}required/>
                </div>

            <div class="col-6">
                <div style={{
                    paddingLeft: '3%',
                    width: '98%'}}>
                    <BootstrapTable data={this.state.data2}  height='500px' scrollTop={ 'Bottom' } search dataSort striped hover >
                        <TableHeaderColumn  dataField='sno'  dataAlign="center" isKey dataSort>S.No</TableHeaderColumn>
                        <TableHeaderColumn dataField='name' tdStyle={ { whiteSpace: 'normal' } } dataAlign="center" dataSort>Name</TableHeaderColumn>
                        <TableHeaderColumn dataField='mobile' tdStyle={ { whiteSpace: 'normal' } } dataAlign="center" dataSort>Mobile</TableHeaderColumn>
                        <TableHeaderColumn dataField='_id,participants'  dataFormat={this.action} dataAlign="center" dataSort>Action</TableHeaderColumn>
                    </BootstrapTable>
                </div>
            </div></div>

            <button type="submit" className="btn btn-primary">Submit</button>
        </form>        

            );
        }
    }


class Checkbox extends Component {

    constructor() {
        super();
        window.postMessage('renderTable','*');
        this.state = {   
            data : "", 
            zzz:[],
        };

        this.checkboxchange=this.checkboxchange.bind(this);
    }

    checkboxchange(event){
        this.setState({ zzz: event.target.value });
    }

    render() {
        return (    

            <div class="form-check mb-2">
                <input class="form-check-input" name="zzz" onChange={this.checkboxchange}  value={this.props.row._id} type="checkbox" id="autoSizingCheck"/>
             </div> //
         )}
    }        

export default xyz;    

如果我滚动并选择复选框，则

选中的条件有效，但是当我在表中搜索特定名称并选择复选框时，已选中的值将变为未选中状态...任何人都可以建议任何方法来执行此操作。