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

Question

我正在编写一个代码，通过在主输入标记中输入一个数字，为我创建一个与我输入的一样多的输入标记。

现在，我想将值存储在数组中的新输入中。例如，如果我创建了四个新的输入，并希望在每个输入中输入一个数字，那么我最终可以得到一个数组，在每个输入中将所有这四个数字都输入。

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;

例如，我尝试了几种方法，但都出现了问题如果我有两个新的输入并且我输入这两个数字：524、96，我的数组将是这样的[ 5 , 52, 524 , 9, 96 ]但是我想要我的阵列，我们会喜欢这个[524, 96]吗

Answer 1

您可以创建一个新的状态数组：inputValues，使用createInputs中的索引作为inputValues中的索引，这样您就可以始终知道数组中的输入：

我添加了一个useEffect，用于根据输入量设置默认值。这将防止数组中出现空索引，例如：

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

const { useState, useEffect } = React;
const Example = () => {
const [numInputs, setNumInputs] = useState(0);
const [inputValues, setInputValues] = useState([]);

useEffect(() => {
setInputValues(new Array(numInputs).fill(0));
}, [ numInputs ]);

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

const onIputFill = (event) => {
let newValues = [ ...inputValues ];
newValues[event.target.id] = +event.target.value;
setInputValues(newValues);
}

console.log('Values: ', inputValues);
return (
<div>
<input
type="number"
value={numInputs}
onChange={(e) => setNumInputs(+e.target.value)}
/>
<button onClick={createInputs}>OK</button>
{createInputs()}
</div>
)
}
ReactDOM.render(<Example />, document.getElementById("react"));

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

Answer 2

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>