反应钩子 - 无法输入输入字段[不重复]

Question

您可以在此处查看完整代码： CODESANDBOX LINK

这真的很奇怪。 我有一个输入字段列表，这些字段根据按钮单击动态呈现

const newFields = (index) =>
<div>
    <input value={inputs[index].name}  onChange={e => handleNameInput(e,index)} />
    <input value={inputs[index].age} type="number" onChange={e => handleAgeInput(e,index)} />
    <Button onClick={() => setInputArray(inputArray => [...inputArray, newFields(++index)])}>Add</Button>
</div>

我正在尝试存储输入的值并在更改时更新它们。但正如标题中所述，我无法在输入字段中输入，一旦我单击一个字符，输入就会失去焦点。我不知道为什么会这样。

这里是状​​态和handleInput函数：

  let [inputs, setInputs] = useState(Array.apply(null, Array(100)).map(function () { return {
    name: '',
    age: ''
  } }));

const handleNameInput = (e, i) =>{
  let tempArr = new Array();
  tempArr = [...inputs];
  tempArr[i].name = e.target.value;
  setInputs([...tempArr]);
}

//handleAgeInput is exactly the same

Answer 1

我认为您的主要问题是重复使用数组。事实是，您只需要一组数据。因此，您需要围绕它构建组件。如果您在状态上创建另一个数组，则会增加复杂性，并导致您当前的问题。

了解为什么没有更新

你是onChange 函数调用更新inputs 数组状态。但是，您正在渲染inputArray，他没有任何改变。没有setInputArray 调用所以，没有重新渲染。

提案

有我理解的你需要的提案实施：

function App() {
  let [inputArray, setInputArray] = useState([{
    name: "",
    age: ""
  }]);

  const handleNameInput = useCallback(
    (e, i) => {
      inputArray[i].name = e.target.value;
      setInputArray([...inputArray]);
    },
    [inputArray]
  );

  const handleAgeInput = useCallback(
    (e, i) => {
      inputArray[i].age = e.target.value;
      setInputArray([...inputArray]);
    },
    [inputArray]
  );

  const handleNewField = useCallback(() =>
    setInputArray(inputArray => [...inputArray, {
      name: "",
      age: ""
    }]),
    []
  );

  return (
    <div className="App">
      {inputArray.map((element, i) => (
        <div>
          <input
            value={element.name}
            onChange={e => handleNameInput(e, i)}
          />
          <input
            value={element.age}
            type="number"
            onChange={e => handleAgeInput(e, i)}
          />
          <button
            onClick={handleNewField}>
            Add
          </button>
        </div>
      ))}
    </div>
  );
}

根据你的需要，也许你应该适应它。有一些方法可以避免重新渲染整个列表。但是这样你可以编辑所有字段

另一种正确的方法是将每个字段分组为另一个 Component.with 独立状态。

如果您希望按钮只出现一次，请将他从循环中移出。

如果您只想显示最后设置的字段，请使用 inputArrays[inputArray.length] 而不是全部循环。

解释：

您正在渲染一组组件 { inputArray.map((e, i) => { return <div key={i}> {e} </div>; })}，其中 e 应该是一个组件。

另一方面，您正在维护一个“隐藏”第一个数组的数据数组。

据我所知，您的用例的主要概念应该是直接从您的数据（您的数据数组）呈现您的组件。 这样你就只有一个事实来源。