这是我的组件下面包含两个按钮(递减,递增),我希望当AppState(Mobx)中的属性(@observable number)
等于10并且当数字更改mobx rerender组件时,隐藏递减按钮细
我在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仅在挂载后触发。但是,我怎样才能以高效的方式处理我的逻辑&#34;?
答案 0 :(得分:2)
componentDidMount仅在您描述的程序中调用一次。 (安装组件后)
不要试图隐藏/显示带有css属性的按钮。 而是在jsx中的render方法中写入
render() {
return (
...
{ this.appState.num === 10 ?
(<button
type="button"
onClick={()=>{this.incrementNumber()}}
className="btn btn-default btn-lg"
>
Increment;
</button>)
: null
}
);
}
那么你在这里做什么,你正在使用一个三元运算符决定是否让反应渲染按钮(然后它返回null)
这样,当数字=== 10
时,您的增量按钮会自动隐藏