多个复选框在react原生中相互覆盖

在React原生中，多个复选框相互覆盖可以通过以下步骤解决：

使用React的状态管理来跟踪每个复选框的选中状态。可以使用useState钩子或者类组件的state来实现。
给每个复选框添加一个onChange事件处理函数，当复选框的选中状态发生变化时，触发该函数。
在onChange事件处理函数中，更新对应复选框的选中状态。可以使用setState或者useState的更新函数来更新状态。
如果希望只能选择一个复选框，可以在onChange事件处理函数中，将其他复选框的选中状态设置为false。
如果希望可以选择多个复选框，可以在onChange事件处理函数中，保持其他复选框的选中状态不变。

以下是一个示例代码：

import React, { useState } from 'react';

function CheckboxGroup() {
  const [checkboxes, setCheckboxes] = useState([
    { id: 1, label: 'Checkbox 1', checked: false },
    { id: 2, label: 'Checkbox 2', checked: false },
    { id: 3, label: 'Checkbox 3', checked: false },
  ]);

  const handleCheckboxChange = (id) => {
    const updatedCheckboxes = checkboxes.map((checkbox) => {
      if (checkbox.id === id) {
        return { ...checkbox, checked: !checkbox.checked };
      }
      return checkbox;
    });
    setCheckboxes(updatedCheckboxes);
  };

  return (
    <div>
      {checkboxes.map((checkbox) => (
        <label key={checkbox.id}>
          <input
            type="checkbox"
            checked={checkbox.checked}
            onChange={() => handleCheckboxChange(checkbox.id)}
          />
          {checkbox.label}
        </label>
      ))}
    </div>
  );
}

export default CheckboxGroup;

在上述示例中，我们使用useState钩子来管理复选框的选中状态。每个复选框都有一个唯一的id，通过map函数遍历复选框数组来渲染复选框列表。当复选框的选中状态发生变化时，调用handleCheckboxChange函数更新对应复选框的选中状态。