通过单击更改 table 中的值

Question

我是 React 的新手，我正在尝试设置一个 table（实际上是一个数组），我可以在其中单击其中一个值来更改它。这是我到目前为止得到的：

function Cache() {

    const cache = [0, 0, 0, 0, 0]

    const clickHandler = (e) => {
            e.target.value = '42'
            console.log('clicked')
    }

    return (
        <div>
            <table>
                <tr>
                    {cache.map((value, index) => {
                        return <td key={index} onClick={clickHandler} > {value} </td>
                    })}
                </tr>
            </table>
        </div>
    )
}

不幸的是，没有任何反应:(。控制台显示它被点击了，但只是在第一次点击时。

有人可以帮助我吗？是否可以在中使用 onClick 或仅与按钮一起使用？我是否需要使用 table 值作为状态？或者使用 useEffect 函数？

Answer 1

您必须在 clickHandler 中获取 index 缓存数组。然后你可以更新基于index的数组。最后用 useState 钩子更新 table.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [cache, setCache] = useState([0, 0, 0, 0, 0]);

  const clickHandler = (index) => {
    console.log("clicked ", index);
    let newCache = [...cache]; // copying the old datas array
    newCache[index] = 42;
    setCache(newCache);
  };

  return (
    <div>
      <table>
        <tr>
          {cache.map((value, index) => {
            return (
              <td key={index} onClick={() => clickHandler(index)}>
                {value}
              </td>
            );
          })}
        </tr>
      </table>
    </div>
  );
}

通过单击更改 table 中的值

Change a value in a table by clicking on it

onclick

reactjs