AutoFocus反应中的输入元素JS

我无法自动聚焦此组件中呈现的输入标记。我在这里错过了什么？AutoFocus反应中的输入元素JS

class TaskBox extends Component { 
    constructor() { 
    super(); 
    this.focus = this.focus.bind(this); 
    } 

    focus() { 
    this.textInput.focus(); 
    } 

    componentWillUpdate(){ 
    this.focus(); 
    } 

    render() { 
    let props = this.props; 
    return (
     <div style={{display: props.visible ? 'block' : 'none'}}> 
     <input 
     ref={(input) => { this.textInput = input; }} 
     onBlur={props.blurFN} /> 
     <div> 
      <div>Imp.</div> 
      <div>Urg.</div> 
      <div>Role</div> 
     </div> 
     <div> 
      <button>Add goal</button> 
     </div> 
     </div> 
    ) 
    } 
}

任何帮助表示赞赏。

来源

2017-02-19 Ayan

当你呈现一个无状态的组件，你可以添加标签'autoFocus'到您的输入元素，它会自动聚焦元素。 –

有一个属性可用于自动对焦autoFocus，我们可以使用它来自动对焦输入元素，而不是使用ref。

使用autoFocus与输入元素：

<input autoFocus />

我们也可以使用ref，但裁判我们需要在正确的地方打电话对焦方法，你在呼唤，在componentWillUpdate生命周期的方法，该方法最初的渲染过程中不会被触发而不是使用componentDidMount生命周期的方法，：

componentDidMount(){ 
    this.focus(); 
}

shouldComponentUpdate：始终在渲染方法之前调用，并启用定义是否需要重新渲染或可以跳过。显然这种方法在初始渲染时不会被调用。只有在组件发生某种状态变化时才会调用它。

componentWillUpdate只要shouldComponentUpdate返回true就会被调用。

componentDidMount：只要渲染方法执行完成，就调用componentDidMount函数。可以通过此方法访问DOM，从而可以定义DOM操作或数据获取操作。任何DOM交互应始终发生在此。

参考：https://facebook.github.io/react/docs/react-component.html

来源

2017-02-19 06:50:03

到底！我刚刚意识到这一点。它开始工作componentDidMount。为什么我们不能专注于componentWillUpdate？一个是渲染完成之前，另一个是发布它，这是触发状态变化。 @mayank是这样的，因为在渲染发生时父组件处于'display：none'模式？所以这意味着如果我们'display：none'输入HTML标签，然后以编程方式聚焦它并显示它（'display：block'），则聚焦将无法工作。我以正确的方式思考？ – Ayan

componentWillUpdate不会在第一次渲染时被调用，componentDidMount会在渲染后被调用，所以你需要在这个方法中关注input元素，检查更新后的答案:) –

'componentDidMount'只会在'render（）在生命周期的安装阶段。所以，这只是'安装'阶段的正确方法。对于更新生命周期，这是不正确的。 –

设置一个ID的输入，然后使用.setAttribute('autoFocus', true)的元素，当你想它着眼

来源

2017-10-21 12:59:43 shinlenox

AutoFocus反应中的输入元素JS

回答

相关问题