首页 文章

在制表选项卡模糊事件后，专注于新呈现的文本输入

提问于
浏览 次
2

我有一个带有文本输入的React（15.3.2）组件 .

（到处我说“渲染”它实际上是渲染或取消隐藏;我已经尝试过了 . ）

当该输入元素模糊时，我使用文本输入渲染新组件 .

我想给新文本输入焦点 .

我试过 componentDidMount ， componentWillUpdate 和 componentDidUpdate ;我试过命名和功能 ref s;我试过反应 .

聚焦本身是有效的，例如，一旦它被渲染，如果我点击初始输入，焦点转到新输入（这是一个错误，但与聚焦，微不足道相比） .

第一个输入有一个 onBlur ，它设置用于告诉第二个输入是否呈现的状态 .

在那个模糊处理程序中，我尽可能地停止事件 .

当我跳出第一个元素时，我已经“过去”了新渲染的元素，例如我当前裸设计中的浏览器标签栏 - 我猜新元素还没有渲染？

class SecondInput extends Component {
  componentDidUpdate = (prevProps, prevState) => {
    if (!this.props.hidden) this._input.focus()
  }

  render = () => 
    <input type="text" hidden={this.props.hidden} ref={(c) => this._input = c}
}

class NewItem extends Component {
  state = { itemEntered: false }

  itemBlurred = (e) => {
    e.preventDefault()
    e.stopPropagation()
    this.setState({ itemEntered: true })
  }

  render = () =>
    <div>
      Item: <input type="text" onBlur={this.itemBlurred} />
      <SecondInput hidden={!this.state.itemEntered} />
    </div>
}

任何想法或提示？我不得不相信它是显而易见的，因为这肯定会一直发生 .

我也对任何其他形式的组件层次结构持开放态度，例如，如果我需要一个容器以某种方式包装所有这些东西，那就没问题了 .

反应15.3.2

javascript reactjs

1 回答

  • 2

    您看到的问题似乎是因为当您按Tab键时页面上没有可聚焦的元素，因此焦点将转到地址栏 . 出于某种原因，当焦点在地址栏上时，只需调用 this._input.focus() 就不会像预期的那样 grab 焦点 .

    为了解决这个问题，我添加了一个空div，并根据是否显示第二个输入设置 tabIndex 属性 .

    为了让自己更容易，我将输入重点放在mount而不是使用hidden属性 . 这可能适用于您的情况，也可能不适用，但它似乎更清晰，因为如果它是一个受控输入，它将保持输入不会将焦点放在每个按键上 .

    let Component = React.Component;


class SecondInput extends Component {
  componentDidMount(){
    this.textInput.focus()
  }

  render(){
    return (
      <input type="text" ref={(input) => this.textInput = input} />
    )
  }
}

class NewItem extends Component {
  state = { itemEntered: false }

  itemBlurred = (e) => {
    //e.preventDefault()
    //e.stopPropagation()
    this.setState({ itemEntered: true })
  }

  render = () =>
    <div>
      Item: <input type="text" onBlur={this.itemBlurred} />
      {
        this.state.itemEntered ? [
          <SecondInput/>
        ] : []
       }
       <div tabIndex={this.state.itemEntered ? null :  0}/>
    </div>
}

ReactDOM.render(<NewItem />, document.body);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
    回复于

相关问题