如何在数组的反应 js 中更改文本输入的值？

Question

我想在我的 React js 应用程序中更改输入框中的值。我尝试使用，它使用 spread.. 但值仍然不会改变。我究竟做错了什么？感谢任何帮助..

这是我的代码：

import { useState, useEffect } from "react";

export default function App() {
  const [stuffs, setStuffs] = useState([]);

  useEffect(() => {
    getStuffs();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const getStuffs = () => {
    let data = [
      {
        id: 1,
        name: "candy",
        qty: 20
      },
      {
        id: 2,
        name: "book",
        qty: 15
      }
    ];
    setStuffs(data);
  };

  const handleChange = (e) => {
    console.log("stuffs1", stuffs);
    setStuffs(
      stuffs.map((item) =>
        item.id === e.target.id ? { ...item, qty: e.target.qty } : item
      )
    );
    console.log("stuffs2", stuffs);
  };

  return (
    <div className="App">
      {stuffs.length > 0 ? (
        stuffs.map((item, index) => (
          <div key={item.id}>
            <label>{item.name}</label>
            <input
              type="text"
              id={item.id}
              name="qty"
              value={item.qty}
              onChange={handleChange}
            />
          </div>
        ))
      ) : (
        <span>No data</span>
      )}
    </div>
  );
}

这是 code sandbox

Answer 1

e.target.id 是一个字符串，而 item.id 是一个数字，所以试试：

setStuffs(
      stuffs.map((item) =>
        item.id === Number(e.target.id) ? { ...item, qty: e.target.qty } : item
      )
    );

Answer 2

event.target.id 计算为一个字符串，item.id 是一个数字。因此，item.id === event.target.id 将始终评估为 false。

改用parseInt()

item.id === parseInt(e.target.id, 10)

Answer 3

由于 event.target.id 默认为 string，您需要将其转换为数字。您可以在开头添加一个 + 以轻松做到这一点

您的代码应该如下所示

stuffs.map((item) =>
      item.id === +e.target.id ? { ...item, qty: e.target.qty } : item
    )

代码中的另一个问题是您使用的 e.target.qty 即 undefined。它应该是 +e.target.value 而不是。（添加 + 出于同样的原因将其转换为数字）

最终代码应如下所示

stuffs.map((item) =>
      item.id === +e.target.id ? { ...item, qty: +e.target.value } : item
    )

如何在数组的反应 js 中更改文本输入的值？

how to change a text input's value in react js for array?

reactjs