Question

我正在显示一个带有单个字段“标题”的 html 表格。一旦用户单击表格行之一，我想在表格下方显示相应的标题名称。使用下拉列表可以正常工作，但是当我尝试将其转换为表格时，状态会停止更新。（我已经将 options 属性作为一个工作示例，但是需要删除或替换它）。我还想在页面首次加载时显示表格中的第一个标题（标题 [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

使用表通过 onClick 事件响应钩子、初始化和更改状态

1 个答案: