如何动态地将添加的输入值推送到数组？

Question

我有 React 组件，我可以在其中动态添加新的文本输入。因此，我需要将输入中的值推送到数组。

任何人都可以帮助我如何做到这一点？

这是我的代码：

function FormPage({ setData }) {
  const [item, setItem] = useState([]);
  const [counter, setCounter] = useState(0);

  const handleCounter = () => {
    setCounter(counter + 1);
  };
  const addItem = (setItem) => setItem((ing) => [...ing, newItem]);

  return (
    {Array.from(Array(counter)).map((c, index) =>
      <TextField 
        key={index} 
        label="Item"
        onChange={() => setItem(i=> [...i, (this.value)])} 
      />
    )}

    <Button onClick={handleCounter}>Add one more item</Button>
  )
}

这是沙箱中的示例： https://codesandbox.io/s/solitary-sound-t2cfy?file=/src/App.js

Answer 1

试试这个：

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

export default function App() {
// Changes made here
  const [item, setItem] = useState({});
  const [counter, setCounter] = useState(0);

  console.log("item 1:", item[0], "item 2:", item[1],item);

  const handleCounter = () => {
    setCounter(counter + 1);
  };
  const addItem = (newItem) => setItem((ing) => [...ing, newItem]);

  return (
    <>
      {Array.from(Array(counter)).map((c, index) => (
        <input
          type="text"
          key={index}
//Changes made here
          value={item[index]}
          label="Item"
// Changes made here
          onChange={(event) => setItem({...item, [index]:event.target.value })}
        />
      ))}

      <button onClick={handleCounter}>Add one more item</button>
    </>
  );
}

我建议不要使用数组来存储输入值，因为它更直接。

如果您想使用数组，可以将 onChange 事件替换为以下内容：

onChange={(event) => {
            const clonedArray = item.slice()
            clonedArray[index] = event.target.value
            setItem(clonedArray)
          }}

它稍微复杂一些，可能也不太理想，因此我建议使用对象。

如果你想稍后遍历对象，你可以像这样使用 Object.entries():

[...Object.entries(item)].map(([key, value]) => {console.log(key, value)})

Here's the documentation 对于 Object.entries()。

Answer 2

首先，您在 TextField 组件中使用双向数据绑定，因此您还需要传递一个 value 属性。
其次，要获取TextField的当前值，我们不使用this.value。相反，onChange 的回调采用 Event 类型的参数，您可以按如下方式访问当前值

<TextField
...
onChange={(e) => {
    const value = e.target.value;
    // Do something with value
}}
/>

您不能 return 一个组件中的多个子组件而不用单个组件包装它们。您只是在同一级别 returning 多个 TextField 组件，这也会导致错误。尝试将它们包装在 React.Fragment 中，如下所示

...
return (
   <React.Fragment>
   {/* Here you can return multiple sibling components*/}
   </React.Fragment>
);

您正在使用等于 item 数组长度的 counter 映射 TextField 组件。在 handleCounter 中，我们将添加一个占位符字符串以容纳新的 TextField 值。

...
const handleCounter = () => {
    setCounter(prev => prev+1); // Increment the counter
    setItem(prev => [...prev, ""]); // Add a new value placeholder for the newly added TextField
}
return (
   <React.Fragment>
     { /* Render only when the value of counter and length of item array are the same  */
     counter === item.length && (Array.from(Array(counter).keys()).map((idx) => (
         <TextField
          key={idx}
          value={item[idx]}
          label="Item"
          onChange={(e) => {
              const val = e.target.value;
              setItem(prev => {
                  const nprev = [...prev]
                  nprev[idx] = val;
                  return nprev;
              })
          }}
         />
     )))}
     <br />
     <Button onClick={handleCounter}>Add one more item</Button>
   </React.Fragment>
);

这里是sandbox link

Answer 3

代码解决方案：https://codesandbox.io/s/snowy-cache-dlnku?file=/src/App.js

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

export default function App() {
  const [item, setItem] = useState(["a", "b"]);

  const handleCounter = () => {
    console.log(item, "item");
    setItem([...item, ""]);
  };

  const setInput = (index) => (evt) => {
    item.splice(index, 1, evt.target.value);
    setItem([...item]);
  };

  return (
    <>
      {item.map((c, index) => {
        return (
          <input
            type="text"
            key={index}
            label="Item"
            value={c}
            onChange={setInput(index)}
          />
        );
      })}

      <button onClick={handleCounter}>Add one more item</button>
    </>
  );
}

我已经帮你解决了。检查这是否适合你，如果有任何问题告诉我

如何动态地将添加的输入值推送到数组？

How to dynamically push added inputs value to array?

javascript

reactjs

react-hooks

use-state