select 只有一个复选框在映射输入时有反应

Question

所以我正在创建这张桌子，让某人出席。 当我向玩家展示并默认给他们假值时，我做了一个表格。 所以我想当你可以拨打 select 只有一个选项时，此人在场、失踪、受伤、生病或迟到。

我看到了一些类似的东西，但找不到真正有帮助或完全有效的东西

这是代码的链接： https://stackblitz.com/edit/react-uwhyxm

这是代码：

import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    let players = [
      { name: 'gimi', id: '1' },
      { name: 'miri', id: '2' },
      { name: 'beni', id: '3' },
      { name: 'cimi', id: '4' },
      { name: 'bani', id: '5' },
      { name: 'bvbd', id: '6' },
      { name: 'bvdb', id: '7' },
    ];

    setPlayers(
      players.map((d) => {
        return {
          name: d.name,
          pressent: false,
          late: false,
          injured: false,
          sick: false,
          missing: false,
          id: d.id,
        };
      })
    );
  }, []);
  const send = () => {
    console.table(players);
  };
  // console.table(players);

  return (
    // <div className="Container">
    //   <div className="flex">
    //     <div className="buttonWrapper">
    //       <button className="button">Save</button>
    //     </div>
    //   </div>
    // </div>
    <div className="tabelDiv">
      <table border="1px">
        <tr>
          <th>Player</th>
          <th>pressent</th>
          <th>late</th>
          <th>injured</th>
          <th>sick</th>
          <th>missing</th>
        </tr>
        {players.map((d, i) => (
          // return (
          <tr key={d.id}>
            <td> {d.name} </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.pressent = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.late = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.injured = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.sick = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.missing = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
          </tr>
          // );
        ))}
      </table>

      <button onClick={send}>send</button>

      {/* <button class="noselect">
        <span class="text">Delete</span>
        <span class="icon">
          <svg
            viewBox="0 0 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path>
          </svg>
        </span>
      </button> */}
    </div>
  );
}

最好是他会 select 一个取消选择而不必再次单击以取消选中，但这不是必需的。 如果有人看过这个，我将不胜感激

Answer 1

您可以使用input radio type 。 使用 id 作为输入的名称