时间戳

首页 > 解决方案 > React Multiple Checkboxes 在更改后不可见

reactjs - React Multiple Checkboxes 在更改后不可见

问题描述

我有一个复选框列表。即使在value更改后，复选框也不会显示为选中状态。

以下是我的代码： -

import React, { useState } from "react";
import { render } from "react-dom";

const CheckboxComponent = () => {
  const [checkedList, setCheckedList] = useState([
    { id: 1, label: "First", isCheck: false },
    { id: 2, label: "Second", isCheck: true }
  ]);

  const handleCheck = (e, index) => {
    checkedList[index]["isCheck"] = e.target.checked;
    setCheckedList(checkedList);
    console.log(checkedList);
  };

  return (
    <div className="container">
      {checkedList.map((c, index) => (
        <div>
          <input
            id={c.id}
            type="checkbox"
            checked={c.isCheck}
            onChange={e => handleCheck(e, index)}
          />
          <label htmlFor={c.id}>{c.label}</label>
        </div>
      ))}
    </div>
  );
};

render(<CheckboxComponent />, document.getElementById("root"));

我在循环外的一个简单复选框上工作得很好。我不确定问题出在哪里。

这是链接 - https://codesandbox.io/s/react-multiple-checkboxes-sczhy?file=/src/index.js:0-848

标签： reactjscheckbox

解决方案

改为这样做：

const handleCheck = (e, index) => {
    setCheckedList(prevState => {
        const nextState = prevState.slice()
        nextState[index]["isCheck"] = e.target.checked;
        return nextState
    });
};

由于checkedList是一个数组，（被视为对象并按此类处理），更改属性不会更改数组本身。所以 React 可以知道发生了什么变化。

推荐阅读