Question

我有一个带有文本输入的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>
}

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

我也对任何其他形式的组件层次结构持开放态度，例如，如果我需要一个容器来包装所有这些东西，那就没关系了。

React 15.3.2

Answer 1

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

为了解决这个问题，我添加了一个空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>

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

1 个答案: