reactjs - 如果反应中的对象数组中存在值，如何检查复选框

Question

如果 reactjs 的对象数组中存在值，如何检查复选框？

我尝试过使用包含功能，但它不起作用。

我在employeeUnder 键中有对象数组-

我的数组是 -

"employeeUnder": [
                {
                    "_id": "5d1a0a8a09b9cb0034d01aaf",
                    "employ": {
                        "_id": "5d120eba60093e02248d6a81",
                        "name": "Sehzan"
                    }
                },
                {
                    "_id": "5d1a0a8a09b9cb0034d01ab0",
                    "employ": {
                        "_id": "5d120eba60093e02248d6a83",
                        "name": "Sumit"
                    }
                },
                {
                    "_id": "5d1a0a8a09b9cb0034d01ab1",
                    "employ": {
                        "_id": "5d120eba60093e02248d6a7c",
                        "name": "Hariom"
                    }
                }
            ],

我必须检查是否——

this.state.allemployees._id === employeeUnder.employ._id 然后必须选中复选框。

我的输入复选框代码是 -

if (this.state.allemployees && this.state.allemployees.length > 0) {
            return (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" checked name={employee.empmainid} value={employee.empmainid} /></td>
                                                                        </tr>))
 }

现在所有的复选框都被选中，因为我没有应用条件。我想如果对象数组中存在一个值，那么必须检查它，否则为否。

标签： reactjscheckbox

Answer 1

查看此沙箱：https ://codesandbox.io/s/blissful-edison-bjh0s

我们将在这里使用两个数组：

1. allEmployees（从不变异）
2. 雇员下（总是更新）

我们可以employeesUnder通过检查/切换相应的input标签来动态更改里面的数据。

本质上，在onChange()事件内部，我们将传递id与 an 关联的employee，如果input已经检查，则意味着它已经在employeesUnder数组中。所以我们将使用那个 id，把filter那个员工传出去。如果 id 在array. 所以我们会将员工添加到employeesUnder.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    employeesUnder: [
      {
        _id: "5d1a0a8a09b9cb0034d01aaf",
        employ: {
          _id: "5d120eba60093e02248d6a81",
          name: "Sehzan"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab0",
        employ: {
          _id: "5d120eba60093e02248d6a83",
          name: "Sumit"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab1",
        employ: {
          _id: "5d120eba60093e02248d6a7c",
          name: "Hariom"
        }
      }
    ],
    allEmployees: [
      {
        _id: "3ds8f8ds9d8fds9f8a9f8afaf",
        employ: {
          _id: "eworweokrkowekoo34324234",
          name: "Woofers"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01aaf",
        employ: {
          _id: "5d120eba60093e02248d6a81",
          name: "Sehzan"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab0",
        employ: {
          _id: "5d120eba60093e02248d6a83",
          name: "Sumit"
        }
      },
      {
        _id: "5d1a0a8a09b9cb0034d01ab1",
        employ: {
          _id: "5d120eba60093e02248d6a7c",
          name: "Hariom"
        }
      }
    ]
  };

  handleCheck = id => {
    const { allEmployees, employeesUnder } = this.state;
    const employeesUnderIds = employeesUnder.map(employee => employee._id);

    if (employeesUnderIds.includes(id)) {
      //remove employee from employeesUnder list
      const newArrWithRemovedEmployee = employeesUnder.filter(employee => {
        return employee._id !== id;
      });

      this.setState({
        ...this.state,
        employeesUnder: newArrWithRemovedEmployee
      });
    } else {
      //add employee to employeesUnder list
      const employeeIndex = allEmployees.findIndex(
        employee => employee._id === id
      );

      const newArrWithAddedEmployee = [
        ...employeesUnder,
        allEmployees[employeeIndex]
      ];

      this.setState({
        ...this.state,
        employeesUnder: newArrWithAddedEmployee
      });
    }
  };

  createList = () => {
    const { allEmployees, employeesUnder } = this.state;
    const employeesUnderIds = employeesUnder.map(employee => employee._id);

    return allEmployees.map(employee => {
      return (
        <div>
          <label>{employee.employ.name}: </label>
          <input
            type="checkbox"
            value={employee._id}
            checked={employeesUnderIds.includes(employee._id)}
            onChange={() => this.handleCheck(employee._id)}
          />
        </div>
      );
    });
  };

  render() {
    return <div>{this.createList()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);