时间戳

首页 > 解决方案 > 反应复选框控件

reactjs - 反应复选框控件

问题描述

我有多个组件，每个组件都有一个复选框。当我单击任何复选框时，只会触发第一个复选框。其他复选框未选中。如何解决这个问题？

TodoItem 组件在这里：

function TodoItem() {
  
  return (
    <li className={styles.todoListItem}>
      <div className={styles.itemGroup}>
        <input
          type="checkbox"
          id="checkItem"
        />
        <label className={styles.customCheckBox} htmlFor="checkItem"></label>
        <span className={styles.todoItem}>
          Lorem, ipsum dolor. Lorem, ipsum dolor
        </span>
        <button className={styles.deleteItem}>X</button>
      </div>
    </li>
  );
}

卡片组件在这里：

import React from "react";
import styles from "./style.module.css";
import TodoItem from "../TodoItem";
function Card({ card, setCard, id }) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <input
          type="text"
          placeholder="Card title"
          defaultValue=""
          maxLength="15"
        />
      </header>
      <input
        type="text"
        placeholder="add todo"
        className={styles.todoItemField}
      />
      <div className={styles.cardBody}>
        <ul className={styles.todoList}>
          <TodoItem />
        </ul>
      </div>
      <button className={styles.deleteCard}>Delete Card</button>
    </div>
  );
}

我正在使用这样的卡片组件：

function Content() {
  const [card, setCard] = useState([]);
  const addCard = () => {
    setCard(
      card.concat(
        <Card
          setCard={setCard}
          card={card}
          key={card.length}
          id={Math.random() * 1000}
        />
      )
    );
  };
  return (
    <div className={styles.container}>
      {card}
      <DefaultCard addCard={addCard} />
    </div>
  );
}

谢谢你

标签： reactjs

解决方案

ID 在文档中必须是唯一的。

如果您使用重复 ID 创建无效 DOM，则使用该 ID 的大多数功能将使用第一个。

当您单击任何标签时，浏览器将看到它是用于 IDcheckItem并触发具有该 ID 的第一个复选框。

使用唯一 ID。

通常，您的项目将需要某种标识符（可能映射回数据库行 ID 或类似的），以便您可以使用它。

例如

const myId = `checkbox_${group_name}_${item_value}`.

推荐阅读