如何控制可变的输入量- React

Question

我有一个创建数组的变量数，例如:

const numberVariable = 3;
const arr = Array(numberVariable).fill(0)  //  [0,0,0] //

我有一个由一个状态控制的Input组件:

const [ input, setInput] = useState();
<InputUser value={input} onChange={(e) => {setInput(e.target.value) />

问题:

当我创建数组的映射时，为数组的每个元素创建一个Input，它们会改变自己,例:

3个输入，我写在第二个，其他两个得到相同的值;

如何使它们独立?知道手动创建3个状态是不可能的(我以3为例，这是一个可变的数字，每次都改变)

基于数组创建输入的代码:

arr .map((number) => {
return (
<div key={number}>
<InputUser/>
</div>
);
});

Answer 1

那么，您正在尝试呈现X数量的输入字段，并能够管理所有这些，对吗?

我不太擅长反应，但我设法做到了，通过从这里得到帮助:https://zacjones.io/handle-multiple-inputs-in-react-with-hooks

const numberVariable = 3;
let arr = [];
for (let i = 0; i < numberVariable; i++) {
arr.push(i);
}
let initialState = {};
arr.forEach((element) => {
initialState[element] = "";
});
console.log(initialState);
const [input, setInput] = useState(initialState);
let inputName = 0;
const handleUserInputChange = (e) => {
const name = e.target.name;
const newValue = e.target.value;
setInput({ [name]: newValue });
};
const a = arr.map((number) => {
inputName++;
return (
<div key={number}>
<input
value={input[inputName]}
name={inputName}
onChange={handleUserInputChange}
></input>
</div>
);
});

有一个问题:"组件正在将受控输入更改为非受控输入"。控制台警报，无害，但确实存在。我无法调试它。但这段代码复制了您想要的行为，并希望给出总体思路。您使用name属性给它们一个唯一的名称，并使用e.target.name访问它，然后作为初始状态，您有X个对象，称为0:"， 1: "，由arr创建。forEach循环，以便您可以通过使用setInput({ [name]: newValue });更改相应的输入字段onChange。

https://codesandbox.io/s/beautiful-brattain-5foeu?file=/src/App.js

希望这是体面的，从来没有回答过一个问题。我在上面给出的文章进一步解释了这一点，你也可以使用像那里那样的减速器，我使用了一个状态。

一步一步:用户输入一个numberVariable，这将是创建的输入的数量，假设他们输入6

创建一个数组，并将0、1、2、3、4、5压入其中。

然后我们有了initialState对象，对于数组中的每个元素，我们在它里面创建一个对象，initialState现在看起来像这样;0:",2:1:""……等等。

我们传递initialState对象作为我们状态的初始状态。

当我们创建输入字段时，我们给它们一个唯一的名称，该名称将与initialState中的对象相同。第一个输入的名称是0，第二个输入的名称是1，以此类推。

每个输入都是用value={input[inputName]}创建的，所以它从状态中获得正确的对象。

所有的输入状态都由handleUserInputChange处理。

现在我们的用户开始在其中一个输入上写字，假设他在名为2的输入上写字。我们使用e.target.name获取该输入的名称，然后使用setInput({[e.target.name]: e.target.value})设置新状态对象名为2，获取输入名为2的值。就是这样。对于每个输入都会发生这种情况，并且它们的值永远不会混合。

Answer 2

把正确答案简化一下。该策略是将所有受控输入状态存储为一个列表，并为每个输入提供一个更新函数，该函数只更新其在数组中的位置。

const ManyInputs = ({howMany}) => {
// Like ["", "", ""]
const [inputs, setInputs] = useState(Array.from(new Array(howMany)).map(_ => ""));
const handleUserInputChange = position => (e) => {
// Update the correct input state
setInputs(...inputs.slice(0, position), e.target.value, ...inputs.slice(position+1));
};
return <>
{inputs.map((text, i) => <input 
value={text}
onChange={handleUserInputChange(i)}>
</input>}
</>;
};