打开和关闭复选框，控制台记录所选复选框的 ID。我怎样才能做到这一点？

Question

我正在使用 material UI 作为 UI，Axios 从 API 端点获取数据作为 JSON。我已经成功地按照我想要的方式对用户进行排序/过滤/映射，并将它们显示在 table 上。顺便说一下，有 1000 个用户。

在单击 LI 时，我希望复选框可以打开和关闭。 selected 用户的 ID 必须在控制台上 console.log。我该如何编写这样的函数？这也适用于多个 LI。我可以 select 想要多少个 LI，它们都应该 console.log

PS- 作为奖励，我还想在单击 table 内的特定复选框时显示用户电子邮件。打开/关闭它我是否应该使用 material-UI 库中的 Checkbox，并使用 onChange 在 styledTableCell 组件中显示 {user.email}？

那我写个状态怎么样？

const [showEmail, setShowEmail]= useState(false);
const handleClick=()=>{
showMe= !this.state.showMe
}

onChange 我想在样式化的table单元格中显示{user.email}，所以..

onChange={()=> onChange(setShowMail(????)}

但是在哪里？在复选框上？或在 styledtable 单元格内。如果在 styledtablecall 中，我如何将它与复选框属性连接起来？

这就是我困惑的地方

这是我在下面 App.js 中的渲染-

import React, { Component, useState, useEffect } from "react";
        import axios from "axios";
        import { withStyles, makeStyles } from "@material-ui/core/styles";
        import Table from "@material-ui/core/Table";
        import TableBody from "@material-ui/core/TableBody";
        import TableCell from "@material-ui/core/TableCell";
        import TableContainer from "@material-ui/core/TableContainer";
        import TableHead from "@material-ui/core/TableHead";
        import TableRow from "@material-ui/core/TableRow";
        import Paper from "@material-ui/core/Paper";
        import Avatar from "@material-ui/core/Avatar";
        import Checkbox from "@material-ui/core/Checkbox";
        
        const StyledTableCell = withStyles((theme) => ({
          head: {
            backgroundColor: theme.palette.common.black,
            color: theme.palette.common.white,
          },
          body: {
            fontSize: 14,
          },
        }))(TableCell);
        
        const StyledTableRow = withStyles((theme) => ({
          root: {
            "&:nth-of-type(odd)": {
              backgroundColor: theme.palette.action.hover,
            },
          },
        }))(TableRow);
        
        const useStyles = makeStyles({
          table: {
            minWidth: 700,
          },
        });
        
        const App = () => {
          const classes = useStyles();
          const [users, setUsers] = useState([]);
          const [search, setSearch] = useState("");
          
        
          const getUserData = async () => {
            try {
              const data = await axios.get(
                //my json file structure. not attaching link due to privacy. 1000 users// users=[
    {
    "id":1,
    "first_name":"Suzie",
    "last_name":"something",
    "email":"jkshr.r@gmail.com",
    "gender":"Female",
    "Avatar":"https://..."
    
    },
]
    
              );
              console.log(data.data);
        
              setUsers(data.data);
            } catch (e) {
              console.log(e);
            }
          };
          useEffect(() => {
            getUserData();
          }, []);
        
        
            return (
                <div className="App">
                  <input
                    type="text"
                    placeholder="search here..."
                    onChange={(e) => {
                      setSearch(e.target.value);
                    }}
                  />
                  <TableContainer component={Paper} justify="center">
                    <Table className={classes.table} aria-label="customized table">
                      <TableHead>
                        <TableRow>
                          
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {users
                          .sort(function (a, b) {
                            if (a.last_name < b.last_name) {
                              return -1;
                            }
                            if (a.last_name > b.last_name) {
                              return 1;
                            }
                            return 0;
                          })
                          .filter((user) => {
                            if (search == "") {
                              return user;
                            } else if (
                              user.first_name
                                .toLowerCase()
                                .includes(search.toLowerCase()) ||
                              user.last_name.toLowerCase().includes(search.toLowerCase())
                            ) {
                              return user;
                            }
                          })
                          .map((user) => {
                            return (
                              <StyledTableRow key={user.id}>
                                <StyledTableCell component="th" scope="row" align="left">
                                  <Avatar>{user.avatar}</Avatar>
                                </StyledTableCell>
                                <StyledTableCell >
                                  {user.first_name} {user.last_name}
                                     
                                </StyledTableCell>
                                <Checkbox/>
                                
                              </StyledTableRow>
                            );
                          })}
                      </TableBody>
                    </Table>
                  </TableContainer>
                </div>
              );
        };
        export default App;

感谢您的所有提示。

Answer 1

这很简单：当您加载 user 时，您可以初始化一个新的 bool 数组（例如使用 user.id 作为索引）。类似于：

...
const [checked, setChecked] = useState([]); // <-- init array of bool in App state
...

const getUserData = async () => {
   ...
   setUsers(data.data);
   // after retrieved users
   let checkedCB = [];
   for (let i = 0; i < users.length; i++) checkedCB[i] = false; // <-- at default all the checkboxes unselected
   setChecked(checkedCB);
   ...
};

现在我们可以使用 StyledTableRow 的 onClick 事件来更改复选框值和 console.log 用户 ID：

<StyledTableRow
   key={user.id}
   onClick={() => {
      handleRowClick(user.id); // <-- this will change checkbox value 
   }}>
     <StyledTableCell
         component="th"
         scope="row"
         align="left">
         <Avatar>{user.avatar}</Avatar>
      </StyledTableCell>
      <StyledTableCell>
           {user.first_name} {user.last_name}
      </StyledTableCell>
      <Checkbox
        checked={checked[user.id]}  // <-- assing checked[user.id] to Checkbox checked prop
          />
 </StyledTableRow>

handleRowClick函数：

const handleRowClick = (userId) => {
    let checkedRes = checked;
    checkedRes[userId] = !checkedRes[userId];
    console.log(userId); // <-- display user id
    setChecked(checkedRes); // <-- toggle checkbox
  };

现在是电子邮件奖励。假设您想在用户名附近显示电子邮件，您可以使用 checked 布尔值来 show/hide 电子邮件。类似于：

<StyledTableRow
   key={user.id}
   onClick={() => {
      handleRowClick(user.id);
   }}>
     <StyledTableCell
         component="th"
         scope="row"
         align="left">
         <Avatar>{user.avatar}</Avatar>
      </StyledTableCell>
      <StyledTableCell>
           {user.first_name} {user.last_name} {checked[user.id] ? user.email : ""}
      </StyledTableCell>
      <Checkbox
        checked={checked[user.id]}
          />
 </StyledTableRow>

打开和关闭复选框，控制台记录所选复选框的 ID。我怎样才能做到这一点？

Toggle the check box on and off, and console log the id's of the selected checkboxes. How can i do that?

checkbox

reactjs

material-ui