Question

我在React webapp中有一个看起来像这样的部分：

<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 import com.datastax.spark.connector.cql.CassandraConnector CassandraConnector(conf).withSessionDo { session => session.execute("ALTER TABLE users ADD coupon_code varchar;") }。
尝试使用实例方法或更多组件制作较小的渲染函数。
尝试大脑，它是如此优雅，恕我直言，还有还原。**
要使用脑调试器，您需要从here下载它。不推荐使用chrome扩展（至少在ubuntu中我无法使其工作）**

** Overmind是由Brain的创建者制作的新的状态管理库。我建议改为尝试（只要不需要IE支持）

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

2 个答案: