Компонент наблюдения mobx не запускает метод componentDidMount

Этот мой компонент ниже содержит две кнопки (уменьшение, увеличение), и я хочу, чтобы кнопка уменьшения была скрыта, когда значение свойства(@observable number) в AppState (Mobx) равно 10, и когда число изменяется, компонент повторного рендеринга mobx работает нормально.

Я поместил отладчик внутрь componentDidMount,

   @observer
class Questions extends Component{
    constructor(props){
        super(props)
        this.appState=this.props.appState
    }
    componentDidMount(){
    debugger
      if(this.appState.num==10){
        document.getElementById("btnDecrement").style.visibility = "hidden";
      }
      else{
        document.getElementById("btnDecrement").style.visibility = "block";
      }
    }
    ...
    render(){

        return(
          <div>
          ...
            <button id="btnDecrement" onClick={()=>{this.appState.decrementNumber()}} type="button" className="btn btn-default btn-lg">
              Decrement
            </button>
            <button type="button" onClick={()=>{this.incrementNumber()}} className="btn btn-default btn-lg">
                   Increment;
                </button>
          </div>

        )
    }
}
    }

он останавливается только после загрузки страницы, что имеет смысл, но мне нужно делать эту проверку каждый раз, когда номер редактируется.

Отредактировано: имеет смысл, что mobx работает таким образом, componentDidMount срабатывает только после его монтирования. Но тогда как я могу обрабатывать свою логику здесь «эффективным способом»?


reactjs mobx-react
person TyForHelpDude    schedule 19.09.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

componentDidMount вызывается только один раз в описанной вами программе. (после монтирования компонента)

Не пытайтесь скрыть/показать кнопку с помощью свойств css. Вместо этого напишите свой метод рендеринга в jsx

render() {
  return (
    ...
    { this.appState.num === 10 ?
      (<button 
         type="button" 
         onClick={()=>{this.incrementNumber()}} 
         className="btn btn-default btn-lg"
       >
         Increment;
       </button>)
      : null
    }
  );
}

Итак, что вы здесь делаете, вы используете тернарный оператор, чтобы решить, позволить ли реагировать кнопку или нет (тогда он возвращает ноль)

Таким образом, ваша кнопка увеличения автоматически скрывается, когда число === 10

person Daniel    schedule 28.09.2017