如何向表格添加复选框-React

Question

我想向已创建的表中的每一行添加一个复选框。另外，应该有一个全选按钮，它应该能够选择所有行。我已经尝试过这个，但所有选择部分都不起作用。

---

import React, { useState, useEffect } from 'react';

const UserTable = props => {

    const [users , setUsers] = useState([]) ;
    const userData = [props.users] ;

    useEffect(() => {
        setUsers(userData)
    },[]) ;

    const handleChange = (e) => {
        const {name , checked} = e.target ;

        if(name === "allSelect") {
            let tempUser = users.map(user => {
                return {...user,isChecked: checked}
            }) ;
            setUsers(tempUser) ;
        }
        else { 
            let tempUser = users.map(user => user.name === name ? {...user, isChecked: checked} : users);

            setUsers(tempUser) ;
        }
    }


    return (
        <table className="table table-dark">
            <thead>
                
                <tr>
                <th scope="col">
                    <input
                        type="checkbox"
                        className="form-check-input"
                        name = "allSelect"
                        onChange = {handleChange}
                    />Select All
                </th>
                    <th scope="col">Hostname</th>
                    <th scope="col">Username</th>
                    <th scope="col">Stop</th>
                    <th scope="col">Sleep</th>
                    <th scope="col">Start</th>
                    <th scope="col">Status</th>
                    <th scope="col">CPU Temperature(°C)</th>
                    <th scope="col">GPU Info</th>
                    <th scope="col">Edit/Delete</th>
                </tr>
            </thead>


            <tbody>
                {

                    props.users.length > 0 ? (
                        props.users.map(user => (

                            <tr key={user.id}>

                                <th scope="row">
                                    <input
                                        type="checkbox"
                                        className="form-check-input"
                                        checked = {user?.isChecked || false}
                                        onChange = {handleChange}
                                    />
                                </th>


                                <td>{user.name}</td>
                                <td>{user.username}</td>
                                <td><button onClick={() => props.editStopPC(user)} className="btn btn-danger">Stop</button></td>
                                <td><button onClick={() => props.editSleepPC(user)} className="btn btn-warning">Sleep</button></td>
                                <td><button onClick={() => props.editStartPC(user)} className="btn btn-success">Start</button></td>
                                <td>{user.status}</td>
                                <td>{user.cpu}</td>

                                <td>{user.info}</td>
                                <td className="center-align">
                                    <button
                                        className="btn btn-info"
                                        onClick={() => props.editRow(user)}>
                                        edit
                                    </button>

                                    <button
                                        className="btn btn-danger"
                                        onClick={() => props.deleteUser(user.id)}>
                                        delete
                                    </button>
                                </td>
                            </tr>
                        ))
                    ) : (
                        <tr>
                            <td colSpan={9}>{props.users[0]} No Users</td>
                        </tr>
                    )
                }
            </tbody>
        </table>
    )
};

export default UserTable;

---

---

我收到

support for the experimental syntax 'optional chaining' isn't currently enabled

错误。对于

user?.isChecked || false

表达式，我尝试过

checked = user!==null ? user.isChecked : false

但没有成功。如果您有帮助我很高兴

编辑：

const [selected , setSelected] = useState([]) ;
    const userData = [props.users] ;

    useEffect(() => {
        setSelected(userData)
    },[]) ;

    const handleClick = (event, name) => {
        const selectedIndex = selected.indexOf(name);
        let newSelected = [];
        if (selectedIndex === -1) {
          newSelected = newSelected.concat(selected, name);
        } else if (selectedIndex === 0) {
          newSelected = newSelected.concat(selected.slice(1));
        } else if (selectedIndex === selected.length - 1) {
          newSelected = newSelected.concat(selected.slice(0, -1));
        } else if (selectedIndex > 0) {
          newSelected = newSelected.concat(
            selected.slice(0, selectedIndex),
            selected.slice(selectedIndex + 1)
          );
        }
        setSelected(newSelected);
      };

---

<th scope="col">
                    <input
                        type="checkbox"
                        className="form-check-input"
                        name = "allSelect"
                        checked={isItemSelected}
                        onChange={(event) => handleClick(event, this.name)}
                    />Select All

                </th>

如果您正在谈论以这种方式使用它，我会收到错误

'isItemSelected' is not defined no-undef

。

Answer 1

<Checkbox checked={isItemSelected} onChange={(event) => handleClick(event, name)} />

这是我正在使用的功能：

  const handleClick = (event, name) => {
    const selectedIndex = selected.indexOf(name);
    let newSelected = [];
    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, name);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }
    setSelected(newSelected);
  };

Answer 2

您可以在这里查看我的示例： https://codesandbox.io/p/sandbox/react-table-sr7tr3

说明： 如果您想在 React 中从头开始创建一个表，而不使用任何外部库，我建议您执行以下操作：使用数组初始化表的状态。如果可能的话，请确保数组中的每个对象都有“checked”或“selected”等属性。 将处理程序函数添加到您的表中。当您单击“全选”按钮或复选框时，处理函数应更新初始状态：映射初始数组，复制元素的内容，然后将布尔值 true 分配给“已选中”或“已选择” ...财产。