我想在表一中增加一个核对箱。 此外,应当有一个独一无二的州,它应当能够选择所有各行。 我已尝试过这项工作,但所有部分都做了工作。

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;

I m 获取支持实验性合成纤维链条目前使错误成为可能。 关于<条码:用户? 用户:虚假的,但还是没有工作。 如果你帮助,我很高兴。

EDIT:

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>

如果你再次谈论采用这一方式,我就错了<代码>。 是 选定的项目没有界定“无<>/代码”。