Question

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

我创建了一个沙盒，其中包含必需的事件。

我打算创建一个如下所示的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表的行颜色

2 个答案: