React 挂钩，使用表通过 onClick 事件初始化和更改状态

Question

我正在显示一个 html table，只有一个字段 'title'。一旦用户单击 table 行之一，我想在 table 下方显示相应的标题名称。使用下拉列表效果很好，但是当我尝试将其转换为 table 时，状态停止更新。（我已经将 options 属性作为一个工作示例，但是这需要删除或替换）。我还想在页面首次加载时显示 table 中的第一个标题 (title[0])。我认为这可能需要一个 useEffect。任何帮助将不胜感激。

import React, { useState } from 'react';

import data from '../../data-files/data.json';

const TestPage = () => {
  const [title, setTitle] = useState('');

  const handleClick = e => {
    const selected = e.target.value;
    setTitle(selected);
  };

  return (
    <>
      <table
        cellPadding="0"
        cellSpacing="0"
        style={{ background: '#1A3D33', color: '#fff' }}
      >
        <thead>
          <tr>
            <th align="left">Title</th>
          </tr>
        </thead>
        <tbody>
          {data.data.map(i => (
            <tr key={i.id}>
              <td onClick={handleClick} style={{ background: '#439981' }}>
                <option>{i.name}</option>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <h3 style={{ marginTop: '50px' }}>{title}</h3>
    </>
  );
};

export default TestPage;

数据来自本地文件：

{
  "data": [
    {
      "id": "1",
      "name": "title 1"
    },
    {
      "id": "2",
      "name": "title 2"
    },
    {
      "id": "3",
      "name": "title 3"
    },
    {
      "id": "4",
      "name": "title 4"
    },
    {
      "id": "5",
      "name": "title 5"
    }
  ]
}

Answer 1

没有 <option> 是行不通的，因为事件不一样，您可以尝试将名称作为参数传递给处理函数：

  {data.data.map(i => (
    <tr key={i.id}>
      <td onClick={() => handleClick(i.name)} style={{ background: '#439981' }}>
        <option>{i.name}</option>
      </td>
    </tr>
  ))}

当然，如果您进行该更改，则需要重构 handleClick

React 挂钩，使用表通过 onClick 事件初始化和更改状态

React hooks, initialize and change state with onClick event using tables

javascript

html-table

reactjs

react-hooks