首页 文章

在Firefox中反应输入丢失焦点

提问于
浏览 次
3

我正在编写反应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中，您无法键入，因为输入失去焦点 .

任何帮助表示赞赏！

reactjs firefox input focus

2 回答

  • 1

    我有一个猜测 . 这只是一个猜测，因为你没有显示正在发生的一切 .

    你的问题来自于不了解React的工作原理 . 试试这个：

    • myArray可能来自州或道具 . 使用setState（）更新myArray的内容，而不是在onChange中执行 myArray[i].name = event.target.value; . 或者，如果它来自道具，那么使用redux来更新它们 .

    • 你可能使用props.updateState来触发组件的重新渲染 . 如果您在前一点中描述的内容，这不应该是必要的 .

    回复于
  • 0

    抱歉!我发现问题出在代码的完全不同的区域 . 上面的代码运行正常 .

    我的错误是，当我应用我的样式时，我有一个随机焦点（） . 我不确定为什么它仍然在Chrome中运行，但危机避免了 .

    感谢您的投入！

    回复于

相关问题