Question

我正在更新onFocus处理程序中发生的组件状态更改的输出的readonly属性。代码在Chrome和Firefox上运行正常，但在IE 11上，您必须单击两次，然后开始编写输入内容。怎么解决？我在这里做了一个代码示例：https://codesandbox.io/s/94j1j8jnwy

UPD：发现几乎相似的问题here

Answer 1

找到一个答案，虽然它看起来像一个黑客，它有点脏。解决方案是从输入中松开焦点并再次返回。我也使用ref输入和setTimeout。

handleOnFocus() {
  console.log('focused!');
  if (this.state.readOnly) {
    this.setState({ readOnly: false }, () => {
      this.input.blur();
      setTimeout(() => this.input.focus(), 0);
    });
  }
}

// ...

<input 
  ...
  ref={(input) => { this.input = input; }} />

完整代码位于codesandbox.io

输入中的html readonly属性不会在IE 11中第一次更改

1 个答案: