自定义表格开关，优雅实现父子组件通信

自定义 React 表格开关：实现表格交互

在 React 应用中，表格是展示和交互数据的常见元素。有时，我们需要表格单元格具有交互性，例如通过开关来更新数据。本文将指导您一步步创建自定义 React 表格开关，包括技术选型、表格和开关组件创建、事件绑定、数据传递和状态更新。

技术选型

• React： 用于构建用户界面的 JavaScript 库。
• JSX： 将 HTML 和 JavaScript 混合使用的语法。
• 父组件： 包含子组件的组件。
• 子组件： 被父组件包含的组件。
• 事件绑定： 将事件处理程序与 HTML 元素关联。
• 数据传递： 在父组件和子组件之间传递数据的机制。
• 状态更新： 更改组件状态的方法。

创建表格

首先，创建表格：

const Table = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>30</td>
          <td>
            <Switch />
          </td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>25</td>
          <td>
            <Switch />
          </td>
        </tr>
      </tbody>
    </table>
  );
};

创建开关组件

接下来，创建开关组件：

const Switch = () => {
  const [status, setStatus] = useState(false);

  const handleChange = (event) => {
    setStatus(event.target.checked);
  };

  return (
    <input type="checkbox" checked={status} onChange={handleChange} />
  );
};

事件绑定

将开关组件绑定到表格单元格：

const Table = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>30</td>
          <td>
            <Switch onClick={() => updateStatus(true)} />
          </td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>25</td>
          <td>
            <Switch onClick={() => updateStatus(false)} />
          </td>
        </tr>
      </tbody>
    </table>
  );
};

数据传递

通过 props 将开关组件的状态传递给父组件：

const Table = () => {
  const [status, setStatus] = useState(false);

  const updateStatus = (newStatus) => {
    setStatus(newStatus);
  };

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>30</td>
          <td>
            <Switch status={status} onClick={() => updateStatus(true)} />
          </td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>25</td>
          <td>
            <Switch status={status} onClick={() => updateStatus(false)} />
          </td>
        </tr>
      </tbody>
    </table>
  );
};

状态更新

最后，更新父组件的状态：

const Table = () => {
  const [status, setStatus] = useState(false);

  const updateStatus = (newStatus) => {
    setStatus(newStatus);
  };

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>30</td>
          <td>
            <Switch status={status} onClick={() => updateStatus(true)} />
          </td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>25</td>
          <td>
            <Switch status={status} onClick={() => updateStatus(false)} />
          </td>
        </tr>
      </tbody>
    </table>
  );
};

总结

通过自定义表格开关，我们可以实现父子组件通信，创建更交互且灵活的表格。

常见问题解答

1. 如何在 React 中禁用表格开关？
使用 disabled 属性：<input type="checkbox" disabled={true} />

2. 如何在表格中使用多个开关？
使用 React 状态和 map 方法生成多个开关。

3. 如何将开关状态存储在 Redux 中？
使用 Redux 将开关状态作为存储在 Redux Store 中的状态的一部分。

4. 如何使用 TypeScript 实现自定义表格开关？
将 TypeScript 类型添加到状态和事件处理程序中：const [status, setStatus] : [boolean, React.Dispatch<React.SetStateAction<boolean>>] = useState(false);

5. 如何使用 React Hooks 在函数组件中实现自定义表格开关？
使用 useState 和 useEffect Hook：

const Table = () => {
  const [status, setStatus] = useState(false);
  useEffect(() => {
    // 代码处理状态更新
  }, [status]);
  return (
    // ...
  );
};