javascript 如何将用户在input标记中输入的所有值传输到数组中

r6hnlfcb 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(168)

我正在编写一个代码，通过在主输入标记中输入一个数字，为我创建一个输入标记，数量与我输入的一样多。
现在我想把新输入的值存储到数组中，例如，如果我创建了四个新输入，并想在每个输入中输入一个数字，我最终可以得到一个数组，在每个输入中输入所有这四个数字。

import {useState} from "react";

const MakeNewInput = () => {

    const [numInputs, setNumInputs] = useState(null)

    const createInputs = () => {
        const inputArray = []
        for (let i = 0; i < numInputs; i++) {
            inputArray.push(<input type="text" key={i}/>)
        }
        return inputArray
    }

    return (
        <div>
            <input
                type="number"
                value={numInputs}
                onChange={(e) => setNumInputs(+e.target.value)}
            />
            <button onClick={createInputs}>OK</button>
            {createInputs()}
        </div>
    )

}

export default MakeNewInput;

我尝试了几种方法，他们都有问题，例如，如果我有2个新的输入，我输入这两个数字给他们：524，96，我的数组将是[ 5 , 52, 524 , 9, 96 ]，但我希望我的数组是[524, 96]吗

JavaScript

来源：https://stackoverflow.com/questions/74931390/how-to-transfer-all-the-values-entered-by-the-user-in-the-input-tag-into-the-arr

2条答案

按热度按时间

gstyhher1#

您可以创建一个新的状态数组：inputValues，其中使用createInputs中的索引作为inputValues中的索引，这样，您始终知道数组中的输入位置：
我添加了一个useEffect来根据输入的数量设置默认值。这将防止数组中出现空索引，例如：

Values:  [
  1,
  0,
  3,
  0,
  0
]

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-28

iezvtpos2#

const App = () => {
  const [number, setNumber] = React.useState("");

  const handleNumber = (e) => {
    setNumber(e.target.value);
  };

  const data = String(number).split("").map(Number);

  console.log(data);

  return (
    <div>
      <input type="number" value={number} onChange={(e) => handleNumber(e)} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 如何将用户在input标记中输入的所有值传输到数组中

2条答案

相关问题

热门标签

最新问答