为 React 处理 React 复选框状态和切换行颜色 Table

Question

我正在尝试切换 table 行颜色并使用复选框保存状态。

我已经创建了一个包含所需事件的沙盒。

我打算创建一个如下所示的 CustomTableRow 组件，但不确定这是否是正确的方法以及这是否会切换行颜色。

const CustomTableRow = ({key, name, age, approved}) => {}

如有任何帮助，我们将不胜感激。

Answer 1

这只是沙盒的编辑版本：

https://codesandbox.io/s/determined-glitter-djhgd

正在从新文件中导出新的行元素。我不确定您拥有的所有变量是否都是必需的，我删除了批准的数组之类的东西。

Answer 2

变化：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { map } from "lodash";
import { Button, Checkbox, Table } from "semantic-ui-react";

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
  "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

function App() {
  const users = {
    4: { name: "Alice", age: 22, approved: false },
    9: { name: "Bob", age: 33, approved: true },
    16: { name: "John", age: 44, approved: false }
  };

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

  const approve = () => {
    // final data is usersData
    console.log("Final Data: ", usersData);
  };

  const toggleApprove = (user, key) => {
    setUsersData({});
    let ud = { ...usersData };

    console.log(ud[key]);
    ud[key].approved = !ud[key].approved;
    console.log(ud[key]);
    setUsersData(ud);
    // maybe update users[e.target.name]['approved] = true/false
  };

  return (
    <div style={{ margin: "50px" }}>
      <Table compact celled definition>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell />
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>Age</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {map(usersData, (user, key) => {
            console.log(user);
            return (
              <Table.Row
                key={key}
                className={user.approved === true ? "positive active" : ""}
              >
                <Table.Cell collapsing>
                  <Checkbox
                    slider
                    checked={user.approved}
                    name={key}
                    onChange={() => toggleApprove(user, key)}
                  />
                </Table.Cell>
                <Table.Cell>{user.name}</Table.Cell>
                <Table.Cell>{user.age}</Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>

        <Table.Footer fullWidth>
          <Table.Row>
            <Table.HeaderCell />
            <Table.HeaderCell colSpan="4">
              <Button size="small" onClick={() => approve()}>
                Approve
              </Button>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

点击确认您的最终数据为：usersData 您可以在保存之前在数据的 toggleApprove 函数中设置任何其他更改

答案输出：HERE

为 React 处理 React 复选框状态和切换行颜色 Table

Handling React Checkbox States and Toggling Row Color for React Table

reactjs

semantic-ui-react