如何在按鈕單擊時添加新文本字段並將該輸入字段的 integer 值添加到反應數組中

Question

我想在按鈕單擊時添加一個新的輸入字段，並將該輸入字段的 integer 值添加到反應數組中

const [price, setPrice] = useState([])
const [count, setCount] = useState([1])

const addNewTextField = () => setCount(prev => [...prev,1])

const addInputValue= () => {
   setPrice()
   console.log(price)
}

<Button onClick={addNewTextField}>Add TextField</Button >
{
   count.map((item, i) => {
   return (
    <TextField   key={i} value={item.value} id={i}  type='text' />
      )
    })
 } 

<Button onClick={addInputValue}>submit</Button >

第一個輸入值為 100，第二個輸入值為 200，當我添加新輸入字段時，結果應該是這樣的： [100,200]

Answer 1

嘗試如下。 您只能保留price state。

import { useState } from "react";

const App = () => {
  const [price, setPrice] = useState([""]);

  const addNewTextField = () => setPrice((prev) => [...prev, ""]);

  const addInputValue = (i, newValue) => {
    console.log(i, newValue);
    setPrice((prevState) =>
      prevState.map((value, valueIndex) =>
        valueIndex === i ? newValue : value
      )
    );
  };

  console.log(price);

  return (
    <>
      <button onClick={addNewTextField}>Add TextField</button>;
      {price.map((item, i) => {
        return (
          <input
            key={i}
            placeholder={`input ${i}`}
            // value={item}
            id={i}
            type="text"
            onChange={(e) => addInputValue(i, e.target.value)}
          />
        );
      })}
      <button onClick={addInputValue}>submit</button>
    </>
  );
};

export default App;

代碼沙箱

Answer 2

const [price, setPrice] = useState([]);
const [count, setCount] = useState([1]);
const [value, setValue] = useState("");

const addNewTextField = () => setCount(prev => [...prev,prev + 1]);

const addInputValue= () => {
   setPrice(price.concat(value));
   console.log(price)
}

<Button onClick={addNewTextField}>Add TextField</Button >
{
   count.map((item, i) => {
   return (
    <TextField   key={i} value={value} id={i}  type='text' onChange={e => setValue(e.target.value)} />
      )
    })
 } 

<Button onClick={addInputValue}>submit</Button >