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

【问题标题】：How to make a checkbox checked if a value exists in array of object in react如果反应中的对象数组中存在值，如何检查复选框
【发布时间】：2019-11-12 19:17:04
【问题描述】：

如果 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>))
 }

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

【问题讨论】：

那么你有两个不同的数组吗？
是的，一个是 allemployees 数组，另一个是employeeUnder 数组
知道了，我会给你一个沙盒，可以告诉你如何工作:)
您的解决方案是否顺利实施？

标签： reactjs checkbox

【解决方案1】：

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

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

allEmployees（从不变异）
employeesUnder（始终更新）

我们可以通过checking/toggling对应的input标签来动态改变employeesUnder里面的数据。

本质上，在onChange() 事件中，我们将传递与employee 关联的id，如果input 已经被选中，则意味着它已经在employeesUnder 数组中。因此，我们将使用该 ID 来filter 该员工。如果在array 中找不到id，则会发生相反的情况。所以我们会将员工添加到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);

【讨论】：