mercredi 3 juillet 2019

Toggle for multiple checkbox is not working in react

How to toggle my checkbox in react.

I have created an onChange event for this but it's not working.

My code for checkbox -

(this.state.allemployees.map((employee) =>
 <tr key={employee.empmainid}>
                                                                            <td>{employee.empname}</td>
                                                                            <td>{employee.empid}</td>
                                                                            <td><input onChange={this.handleCheckbox} getUsername={employee.empname} className="" type="checkbox" name={employee.empmainid} value={employee.empmainid} checked={this.state.employeeIdInArray.includes(employee.empmainid) ? true : false} /></td>
                                                                        </tr>))

I have defined this.handleCheckbox = this.handleCheckbox.bind(this); in constructor method .

My code for handling checkbox -

handleCheckbox(event) {

        var allemployyes2 = this.state.allemployyes2;
        const { value, checked } = event.target; // get id and checked status
        var allemployyes1 = this.state.allemployyes1;

        // Add to an array if checked and remove - if uncheck
        if (checked) {
            var username_push = event.target.getAttribute("getUsername");
            allemployyes1.push(value);
            allemployyes2.push(username_push);
        } else {

            allemployyes1 = allemployyes1.filter(id => id !== value);
        }

        this.setState({ allemployyes1: allemployyes1, allemployyes2: allemployyes2 });
        console.log(this.state.allemployyes2);
    }

Toggle is not working.

Aucun commentaire:

Enregistrer un commentaire