在动作中切换动态创建的复选框

Question

I have created a table dynamically in react with some fields and a checkbox in each row. Now In the column header I have a checkbox. When I click the checkbox I want all the rows checkbox to be selected. Also now if I click any checkbox, that should toggle its state.

Till now I am able to generate the dynamic rows in the table and delete individual rows.

Table Headers

                           <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">  
                                        <table id="mytable" class="table table-bordred table-striped">  
                                            <thead>  
                                                <th><input type="checkbox" id="checkall" onChange={this.checkAll}/></th>
                                                <th>Id</th>
                                                <th>Id1</th>
                                                <th>Id2</th>
                                                <th>Email</th>
                                                <th>Edit</th>  
                                                <th>Delete</th>
                                            </thead>
                                            <tbody>{users}</tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

Function to add new user

addUserState =(dat) => {
        let data = JSON.parse(dat);
        let id = this.randomPassword(32);

        let newElement = null
        newElement = <tr>
                    <td><input type="checkbox" class="checkthis"/></td>
                    <td class="userId">{id}</td>
                    <td class="id1">{data.payload.id1}</td>
                    <td class="id2">{data.payload.id2}</td>
                    <td class="userEmail">{data.payload.email}</td>
                    <td><p data-placement="top" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                    <td><p data-placement="top" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" onClick={this.deleteUser.bind(this, id)}><span class="glyphicon glyphicon-trash"></span></button></p></td>
                    </tr>
        this.setState({users: this.state.users.concat([newElement])});
    }

CheckAllfunction:

checkAll = (e) => {
        let length = this.state.users.length;
        if(e.target.checked) {
            for(let i = 0; i < length; i++) {
                console.log(this.state.users[i]);
                //Do what here
            }
        }

    }

one possible way I find is to associate a checked state property with each of the checkboxes that I create but it will be difficult to manage, since I will be performing CRUD operations on the rows.

Thanks for help in advance

Answer 1

Checkboxes are about toggling data state of variable which is limited to true/false value. There is no need to read it's value from DOM, React offers you much cleaner way.

toggleCheckbox() {
  checkbox.checked = !checkbox.checked;
}

Please, see this fiddle . It contains full example with code handling your use case on data level.