Question

我的iframe位于position: fixed;的div中。这个iframe加载了一个React应用程序。 仅限移动浏览器，此应用程序中由React状态控制的任何输入都会在您尝试键入字段时导致一些奇怪的行为。每个输入都会使定位的div看起来好像从屏幕跳出然后完全消失。但是，当我检查时，它仍然会将输入显示在正确的位置，并且光标会保持在应有的位置，并且每次输入都会按预期进行。

我已经确认只有当输入由React状态控制时才会发生这种情况。如果我只是做<input type="text"/>，它的行为就应该如此。

代码：

<div style="position:fixed;>
    <iframe src="/* my React application url */"><iframe>
</div>

阵营：

import React, { Component } from 'react'
export default class App extends Component {
  state = { value: '' }

  changeInput = (e) => {
    this.setState({
      value: e.currentTarget.value
    })
  }

  render() {
    return (
      // This has no issues on mobile
      <input type="text"/>
      // This causes problems stated above
      <input type="text" value={this.state.value} onChange={this.changeInput} />
    )
  }
}

非常感谢任何帮助！

iframe中的React受控输入会导致iframe跳转并在onChange上消失

0 个答案: