Reactjs 一周前刚开始学习React，一直在调试为什么输入框在每次输入后都没有焦点

发布于03月04日

下面只是一个重现此问题的简化虚拟示例.

function MultiplierBox() {
  const [a, setA] = useState([1.0, 2.2])
  function updateA(index, newValue) {
    const newArray = [...a];
    newArray[index] = newValue;
    setA(newArray);
  }
  function Row({ a, index }) {
    function handleA(event) {
      const newValue = parseFloat(event.target.value)
      updateA(index, newValue)
    }
    return <input type="number" value={a[index]} onChange={handleA} />
  }
  return (<div className="MultiplierBox">
    {a}
    <Row a={a} index={0} />
    <Row a={a} index={1} />
  </div>);
}

我try 了什么:

使用单个值而不是数组(有效)
已判断css样式规则
创建了问题的简化版本

我期望的是:

输入字段保持焦点

推荐答案

您已经定义了MultiplierBox组件中的Row组件inside.这意味着每次MultiplierBox呈现时，都会创建一个全新的Row函数.它可能与旧的具有相同的文本，但就Reaction所知，它是一种不同类型的组件.所以Reaction卸掉了旧的一排，挂上了新的一排.新安装的输入没有焦点.

解决办法是在顶层只定义一次所有组件.您将需要修改Row组件，以便updatA是一个传递下来的props :

function Row({ a, index, onChange }) {
  function handleA(event) {
    const newValue = parseFloat(event.target.value);
    onChange(index, newValue);
  }
  return <input type="number" value={a[index]} onChange={handleA} />;
}

function MultiplierBox() {
  const [a, setA] = useState([1.0, 2.2]);
  function updateA(index, newValue) {
    const newArray = [...a];
    newArray[index] = newValue;
    setA(newArray);
  }

  return (
    <div className="MultiplierBox">
      {a}
      <Row a={a} index={0} onChange={updateA} />
      <Row a={a} index={1} onChange={updateA} />
    </div>
  );
}