React在Firefox中输入框失去焦点

Question

我正在使用React JS编码。

我们有一个输入表单，其中包含文本输入框。文本输入框触发了一个onChange函数，导致状态改变（从而进行重新渲染）。

var resultJSXcount = 1;
for (let i = 0; i < myArray.length; i++){
  resultJSXTable.push(
    <tr key= {resultJSXcount++}>
      <td  style = {{"paddingRight": "10px"}} > {i+1}: </td>
      <td  style = {{"paddingRight": "10px"}}> 
        <input 
          type='text' 
          id = {i}
          value = {myArray[i].name}
          onChange = {(event)  => {
            myArray[i].name = event.target.value; 
            this.props.updateState()}}
          />
      <span style={{"color":"red"}} > 
        {this.props.parentState.errorName[i]} 
      </span>
    </tr>
  ); 
}

这在Chrome和Internet Explorer中完美运行。但是在Firefox中，你无法输入，因为输入会失去焦点。

任何帮助都将不胜感激！

- Tyler

---

这真的是一个焦点问题吗？你尝试过在输入中使用 defaultValue 而不是 value 吗？ - devserkan

是的，这是一个焦点问题，因为它在Internet Explorer和Chrome中都可以工作。我尝试使用defaultValue，但它并不影响焦点。 - Tyler

Answer 1

我猜测，这只是一个猜测，因为你没有展示所有的情况。

你的问题来自于不理解React的工作原理。尝试以下步骤：

• myArray可能来自于状态或属性。使用setState()更新myArray的内容，而不是在onChange中使用myArray[i].name = event.target.value;。或者如果它来自于属性，则使用redux进行更新。
• 你可能使用props.updateState触发组件的重新渲染。如果你按照上一步所述的方法操作，这将是不必要的。

- Odif Yltsaeb

---

抱歉没有提供更多细节。在某些方面，我们可能过于复杂化了事情。我们没有使用props.updateState，而是通过setState(myArray: myArray)将变量传递到状态中。问题是，在Firefox中，它似乎不是更新输入，而是删除并重新创建输入，从而失去焦点。是否有任何关于Firefox的原因导致这种情况？ - Tyler

Answer 2

抱歉！我发现问题实际上出现在代码的完全不同区域。上述代码运行良好。

我的错误在于应用样式时使用了随机的focus()。我不确定为什么它在Chrome中仍然有效，但危机已经解除。

感谢您的建议！

- Tyler