javascript - 在行中递增计数器

问题描述

当我单击表中每个人的姓名时，我想增加一个计数器。每个名称都有一个计数器，计数器位于不同的行中。

我试图按照与“点击计数器”相关的教程进行操作。当我点击其中一个人的名字时，它会影响所有计数器。不是我需要的。我在这里分享我的代码。（注意：我正在使用 Material-UI 和 React）

用户表.js

export default function UserTable(props) {
  const classes = useStyles();

  const [count, setCount] = useState(0);

  return (
    <Grid item xs={6}>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell align="center">Name</TableCell>
              <TableCell align="center">Email</TableCell>
              <TableCell align="center">Click Counter</TableCell>
              <TableCell align="center">Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {props.users.length > 0 ? (
              props.users.map((user) => (
                <TableRow key={user.id}>
                  <TableCell align="center">
                    <Button onClick={() => setCount(count + 1)}>
                      {user.name}
                    </Button>
                  </TableCell>
                  <TableCell align="center">{user.username}</TableCell>
                  <TableCell align="center">{count}</TableCell>
                  <TableCell align="center">
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={() => {
                        props.editRow(user);
                      }}
                    >
                      Edit
                    </Button>
                    &emsp;
                    <Button
                      variant="contained"
                      color="secondary"
                      onClick={() => props.deleteUser(user.id)}
                    >
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell align="center">No users</TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>
    </Grid>
  );
}

主页.js

export default function Home() {
  const classes = useStyles();

  const usersData = [
    { id: 1, name: "Tania", username: "floppydiskette" },
    { id: 2, name: "Craig", username: "siliconeidolon" },
    { id: 3, name: "Ben", username: "benisphere" },
  ];

  const [users, setUsers] = useState(usersData);

  const [editing, setEditing] = useState(false);

  const initialFormState = { id: null, name: "", username: "" };

  const [currentUser, setCurrentUser] = useState(initialFormState);

  const updateUser = (id, updatedUser) => {
    setEditing(false);

    setUsers(users.map((user) => (user.id === id ? updatedUser : user)));
  };

  const editRow = (user) => {
    setEditing(true);

    setCurrentUser({ id: user.id, name: user.name, username: user.username });
  };

  const addUser = (user) => {
    user.id = users.length + 1;
    setUsers([...users, user]);
  };

  const deleteUser = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />
        {editing ? (
          <EditUserForm
            setEditing={setEditing}
            currentUser={currentUser}
            updateUser={updateUser}
          />
        ) : (
          <AddUserForm addUser={addUser} />
        )}
      </Grid>
    </div>
  );
}

标签： javascriptcssreactjs

您需要 ( const [count, setCount] = useState(0);) 使用与整数值不同的值，因为您的计数器是由表中的用户共享的。

您也许可以使用一个对象，当单击增量时，也许您可以将计数器保存在一个属性下，该属性是客户的名称或 ID，并执行类似的操作

setCount(prevState => {
    return {
       ...prevState,
       [UserID] : prevState.UserID ? prevState.UserID++ : 1
    }
})

当你读取数据时

couter[UserID]

javascript - 在行中递增计数器

问题描述

解决方案

推荐阅读