Question

我想同时显示和聚焦输入字段。我正在以最优雅的方式寻求建议。

简单的方法，不起作用，将是： *包含输入字段的元素通过设置display =''进行一些状态更改，从而取消隐藏输入框。我得到了这部分工作。 *包含输入字段的元素通过ref获取子元素，并在其DOM元素上调用.focus（）。这是不起作用的部分。

我认为这是因为样式更改（display =''）没有传播到真正的DOM，所以focus（）不起作用。

我可以想办法解决这个问题（输入字段可能有一个状态var isFocusing，它只在渲染发生后调用focus（）），但我想听听是否有更优雅的方法来实现这一点。

谢谢！

Answer 1

在将更新刷新到DOM之后立即调用

componentDidUpdate（prevProps，prevState），它可以用于在正确的时间聚焦输入框。

componentDidUpdate(prevProps) {
  if(!prevProps.show && this.props.show){
     // We transitioned from hidden to shown. Focus the text box.
     this.refs.myInput.getDOMNode().focus();
  }
},
render(){
   return (
     <form>
        <input className={this.props.show ? 'input-shown' : 'input-hidden} />
     </form>
   );
}

此处的文档中有更多信息：https://facebook.github.io/react/docs/more-about-refs.html

答案 1 :(得分：1)

在父母发送隐藏道具时使用父子设置。在子渲染中if（this.props.hide）返回null;或者返回输入。同样在孩子中使用componentWillReceiveProps（nextProps）并在那里设置焦点。

Answer 2

在父母发送隐藏道具时使用父子设置。在子渲染中if（this.props.hide）返回null;或者返回输入。同样在孩子中使用componentWillReceiveProps（nextProps）并在那里设置焦点。

ReactJS：取消隐藏+聚焦输入字段

2 个答案: