ReactJS：取消隱藏+聚焦輸入字段

我想同時顯示和聚焦輸入字段。我正在尋找建議，以最優雅的方式來做到這一點。ReactJS：取消隱藏+聚焦輸入字段

簡單的方法不起作用： *包含輸入字段的元素會通過設置display =''來取消隱藏輸入框的狀態更改。我有這部分工作。 *包含輸入字段的元素通過ref獲取子元素，並在其DOM元素上調用.focus（）。這是不起作用的部分。

我認爲這是因爲樣式更改（display =''）沒有傳播到真正的DOM，所以focus（）不起作用。

我可以想辦法解決這個問題（輸入字段可能有一個狀態變量isFocusing，它只在渲染髮生後才調用focus（）），但我會聽到是否有更優雅的方法來實現這一點。

謝謝！

2015-09-29 Chris

在更新刷新到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

來源

2015-09-29 17:39:29

感謝您的想法！我認爲目前的impl有一個小問題，因爲每次更新都會關注組件 - 有點煩人。我只注意到componentDidUpdate爲你提供了以前的道具/狀態，這使得人們只能在this.state.show過渡時聚焦（）。 – Chris

是的，需要更多的邏輯取決於用例，但使用裁判是訣竅！你也可以使用jquery和ref，例如：$（React.findDOMNode（this.refs.myRef））。show（）; –

與父母一起發送隱藏道具時使用父級子設置。在子渲染中，如果（this.props.hide）返回null;或返回輸入。同樣在子使用componentWillReceiveProps（nextProps）並在那裏設置焦點。

來源

2015-09-29 16:11:16

ReactJS：取消隱藏+聚焦輸入字段

回答

相關問題