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 />
  }
}

这会失败，因为React还没有用输入重新渲染组件。有什么方法可以在重新渲染完成后如何等待和检测？

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

Mobx和React。如何在可观察到的变化后处理焦点输入？

1 个答案: