React 鈎子，使用表初始化和更改 state 和 onClick 事件

Question

我正在顯示一個帶有單個字段“標題”的 html 表。 一旦用戶單擊其中一個表格行，我想在表格下方顯示相應的標題名稱。 使用下拉列表效果很好，但是當我嘗試將其轉換為表格時，state 停止更新。 （我已經將 options 屬性作為一個工作示例，但是這需要刪除或替換）。 我還想在頁面首次加載時顯示表格中的第一個標題 (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>是行不通的，因為事件不一樣，您可以嘗試將名稱作為參數傳遞給處理 function：

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

當然，如果你做了那個改變，你將需要重構handleClick