ReactJS显示/隐藏按钮不起作用

Question

我在React Web应用程序中有一个部分如下所示：

<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很陌生。

Answer 1

我不是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
}

我没有测试以上内容，但您应该设法使其工作:)祝您好运！

Answer 2

请提供完整的课程和大脑版本以正确回答此问题。

一些建议：

• 在使用状态管理之前，请先尝试了解react的setState 。
• 尝试使用实例方法或更多组件制作更小的渲染函数。
• 一定要尝试一下大脑，它非常优雅，恕我直言，它比redux更好。**
• 要使用大脑调试器，您需要从此处下载它。 chrome扩展名已弃用（至少在ubuntu中我无法使其正常运行）**

** Overmind是Brain的创造者创建的新的状态管理库。 我建议尝试代替它（只要不需要IE支持）