ReactJS显示/隐藏按钮不工作

问题描述：

我有一个Web应用程序做出反应，看起来像这样的部分：ReactJS显示/隐藏按钮不工作

<div style={ sidebarControlStyle }> 
    Minimum ORF Size: { minimumOrfSize }     
    { readOnly ? null : 
     <div id='orfControl' onClick={function() {showOrfModal = true;}}> Change </div>      
    } 
    { showOrfModal ? 
     <div id='orfModal'> 
      <input id='orfInput' type='number' defaultValue={ minimumOrfSize }/> 
      <button name='setOrfMin' onTouchTap={function() { 
       var newMinVal = document.getElementById('orfInput').value; 
       signals.changeOrfMin({ newMin: newMinVal }); 
       showOrfModal = false; 
      }}>Set</button> 
      <button name='closeOrfModal' onClick={ function() {showOrfModal = false 
      }}>Cancel</button> 
     </div> : null 
    } 
</div>

这部分控制一个名为minimumOrfSize变量，应该由用户改变。我希望这样做的是显示一个“更改”按钮，单击时会显示一个模式，您可以在其中输入新值并单击“设置”更改该值。 signals是一个脑控制器信号的参考，它会改变状态树中的值。现在，单击“更改”按钮不会执行任何操作。我是否错误地引用了某些内容？我对React相当陌生。

当你做什么 onClick = {function（e）{console.log（“onClick”，e）;}}？ –

我看到“onClick”消息和一个由（程序）调用的SyntheticMouseEvent，所以它注册了点击，所以这很好。我注意到，如果我记录showOrfModal它具有值true，所以它被设置，但该模式div不是呈现。 – ReapEater

请提供您使用的大脑版本以及您如何将它与状态联系起来。顺便说一下，您可以使用Cerebral Debugger Extension来更好地了解控制器中发生了什么。 – Guria

答

我不是一个React古茹，但我可能会''状态'的方式。

this.state = { 
    showModal: false, 
    this._onButtonClick = this._onButtonClick.bind(this); 
};

改变状态

_onButtonClick() { 
    this.setState({ 
     showModal: true 
    }); 
}

在按钮我们调用的函数改变状态

<div id='orfControl' onClick={this._onButtonClick}> Change </div>

，然后一部分，你实际呈现的模式

功能

{this.state.showModal ? 
    <MyModal /> : 
    null 
}

我没有测试过上面的，但你应该设法使它工作:) 祝你好运！

ReactJS显示/隐藏按钮不工作

相关推荐