React单选功能实现：选中指定元素后如何将其他元素的isSelected设为false

问题根因 #

现有selectItem方法仅更新了当前点击元素的isSelected状态为true，未对其余元素的选中状态做重置处理，因此会出现多元素同时选中的问题。

实现方案 #

修改selectItem逻辑，在更新当前选中项状态前，先遍历所有元素，将非当前选中项的isSelected统一设为false即可：

修改后的selectItem代码 #

const selectItem = (e) => {
  if (e) {
    const selectedItemKey = e.target.id;
    // 遍历所有元素，重置非选中项状态
    const updatedDivs = Object.fromEntries(
      Object.entries(textBoxDivs).map(([key, value]) => [
        key,
        {
          ...value,
          isSelected: key === selectedItemKey
        }
      ])
    );
    setTextBoxDivs(updatedDivs);
  }
};

完整可运行代码 #

import "./styles.css";
import { useState } from "react";

// 父组件
const App = () => {
  const [textBoxDivs, setTextBoxDivs] = useState({});

  const addNewTextBox = () => {
    const numOfTextBoxDivs = Object.keys(textBoxDivs).length;
    setTextBoxDivs({
      ...textBoxDivs,
      [`div${numOfTextBoxDivs + 1}`]: {
        isSelected: false,
        innerText: "text"
      }
    });
  };

  const selectItem = (e) => {
    if (e) {
      const selectedItemKey = e.target.id;
      const updatedDivs = Object.fromEntries(
        Object.entries(textBoxDivs).map(([key, value]) => [
          key,
          {
            ...value,
            isSelected: key === selectedItemKey
          }
        ])
      );
      setTextBoxDivs(updatedDivs);
    }
  };

  return (
    <div>
      <button onClick={() => addNewTextBox()}>
        点击创建可选中div
      </button>

      {Object.keys(textBoxDivs).length > 0 &&
        Object.keys(textBoxDivs).map((key, index) => {
          return (
            <div
              style={{
                border: textBoxDivs[key].isSelected
                  ? "2px solid green"
                  : "unset"
              }}
              onClick={(e) => selectItem(e)}
              key={index}
              id={key}
            >
              {textBoxDivs[key].innerText}
            </div>
          );
        })}
    </div>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者FlexLuthor