如何將標簽更改為<input>使用按鈕在 react.js 中激活標簽？

Question

在下面給定的代碼中，有一個td標簽，其中包含input標簽。 我最初已將其禁用，以便用戶無法更改數據。 因此，如果其中的數據超過 2 行或其他內容，那么所有數據都將不可見。

1）我想讓數據適合它的長度，比如'textarea'。 2)最后，有一個“編輯”按鈕，當我點擊那個按鈕時，所有的td標簽都應該變成輸入標簽。 因此我應該能夠編輯其中的數據。 請問有人可以幫我嗎？ 我想用 react.js 來實現這個提前謝謝你。

import React, {useEffect, useState} from 'react';
import '../src/tabledata.css';

  function TableData() {
    const [data, getData] = useState([])

useEffect(() => {
  fetchData()
},[])

const fetchData = () => {
  fetch("/api")
  .then((res) =>
  res.json())

  .then((response) => {
    console.log(response);
    getData(response);
  })
}

function edit() {


  
}

return (
  // whole body
  <div className='body'>
    <h1 className='heading'>GCP DOCUMENT AI DATA</h1> {/* heading */}

    <div> {/* container for table */}
    <div className='tbl'> {/* div for table inside container */}
    <tbody>
      <tr> {/* headings in table */}
        <th>Keys</th>
        <th>Values</th>
      </tr>

      {data.map((item,i) => (
        <tr key={i}> {/* 1st column keys and 2nd column values */}
          <td>{item.keys}</td>
          <td><input className='tdValueInput' type="text" value={item.values} disabled/></td>
        </tr>
      ))}
      <div> {/* div for buttons */}
        <input type="submit" className='bttn-edit' value="Edit" onClick={edit}/>
        <input type="submit" className='bttn-approve' value="Approve"/>
      </div>
    </tbody>
    </div>
  </div>
  </div>
);
  }

export default TableData;

Answer 1

你需要做幾件事：

1. 將表單轉換為編輯模式需要一個反應 state

const [isEditing, setEditing] = useState(false);

2. 您需要在編輯 function 中“激活”編輯模式

setEditing(true);

3. 您需要根據isEditing變量更改<td>與<input>的渲染

{isEditing ? <td>{item.values}</td> : <td><input value={item.values} /></td>}

4. 您需要為輸入添加onChange道具以更改編輯的數據

<input value={item.values} onChange={(e) => item.values = e.target.value}  />

您有無效的 HTML 結構 - 缺少<table>並將<div>與<tr>元素混合在同一級別