reactjs - 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 中，您无法键入，因为输入会失去焦点。

感谢任何帮助!

Answer 1

我有一个猜测。这只是一个猜测，因为您没有显示正在发生的所有事情。

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

• myArray 可能来自状态或 Prop 。使用 setState() 更新 myArray 的内容，而不是在 onChange 中执行 myArray[i].name = event.target.value; 。或者如果它来自 props，则使用 redux 来更新它们。
• 您可能使用 props.updateState 来触发组件的重新渲染。如果您在上一点中描述了这一点，则这应该不是必需的。