Mobx and React. 관찰 가능한 변경 후 초점 입력을 처리하는 방법?

Question

React 상태에서는 새로운 값을 설정하기가 쉬웠습니다.이 값은 일부 입력을 렌더링하기위한 조건이었으며 그 다음 상태 콜백으로 해당 입력에 집중했습니다. 입력했던 아직 다시 쓰게 성분 반응 때문에

handleToggleInput() { 
    const showInput = !this.state.showInput 
    this.setState({ showInput },() => showInput && this.refs.input.focus()) 
} 

render() { 
    if(this.state.showInput) { 
    <input ref="input" type="text /> 
    } 
} 

지금을 Mobx로 전환하면,

@observable showInput = false; 

handleToggleInput() { 
    this.showInput = !this.showInput 
    this.showInput && this.refs.input.focus() 
} 

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

이 실패 할 수없는 경우. 다시 렌더링 할 때 대기 및 검색 방법이 있습니까?

Answer 1

setState의 콜백은 상태가 설정되고 구성 요소가 다시 렌더링 된 후에 실행됩니다. MobX는 이에 해당하지 않습니다. React가 UI를 렌더링 한 후에이 메소드를 사용하여 포커스를 맞 춥니 다.

componentDidUpdate: function(prevProps, prevState){ 
    this.refs.input.focus(); 
}, 

먼저

componentDidMount: function(){ 
    this.refs.input.focus(); 
}, 

React set focus on input after render

https://facebook.github.io/react/docs/react-component.html#componentdidupdate