在Firefox

时间:2018-05-30 04:03:08

标签: reactjs firefox input focus

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

感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

我有一个猜测。这只是猜测,因为你没有展示正在发生的一切。

你的问题来自不了解React的工作原理。试试这个:

  • myArray可能来自州或道具。使用setState()更新myArray的内容,而不是在onChange中执行myArray[i].name = event.target.value;。或者如果它来自props,那么使用redux来更新它们。
  • 您可能使用props.updateState来触发组件的重新渲染。如果您在前一点中描述的内容,这不应该是必要的。

答案 1 :(得分:0)

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

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

感谢您的投入!