Javascript 根据ReactJS中的当前状态显示/隐藏单击组件

免责声明：我对ReactJS是新手

我正在尝试实现一个对话框窗口，以便在应用程序的第一页上选择国家/语言

其思路如下：

• 右上角有一个小标志按钮，用户可以单击（CountryFlag）
• 单击后，将显示一个对话框（对话框），其中包含5个国家（国旗），每个国家有2种可能的语言选择。选择一个国家（例如LA）和语言（例如lo）会产生一个特定的地区，例如lo LA

我的对话框最初如下所示：

点击越南国旗后，它应变为：

在点击国旗后，我想在国旗右侧显示两个按钮（div），以便用户可以选择一种语言。因此，我尝试根据与所选语言对应的当前状态有条件地添加div：

<div className="Country-flag-big" onClick={this.selectCountry("KH")} data-country={"KH"} />
{ this.state.countrySelected==="KH" ? <div className="Language-big" onClick={this.selectLocale} data-locale={"km-KH"} >ភាសាខ្មែរ</div> : null }
{ this.state.countrySelected==="KH" ? <div className="Language-big" onClick={this.selectLocale} data-locale={"en-KH"} >English</div> : null }

知道我为什么会犯这个错误吗

谢谢

语句导致错误

应该是

 <div className="Country-flag-big" onClick={() => this.selectCountry("KH")} data-country={"KH"} />

当你这样做的时候

onClick={this.selectCountry("KH")}

您实际上是在调用函数，而不是存储对click处理程序的引用，以便它仅在单击时触发。你可以这样做

onClick={() => this.selectCountry("KH")}

或者更好的是，创建一个绑定函数，该函数在国家名称中传递，如下所示

onClick={this.selectCountry.bind(this, "KH")}

但是，由于您在单击的那些元素中有

data-

属性，因此您可以将

onClick={this.selectCountry}

放入

selectCountry

处理程序中，您可以这样重写它

selectCountry(e) {
  let country = e.currentTarget.dataset.country;
  // country will be "KH" for example
}

---

非常感谢这个详细的答案，+1是以优雅的方式使用数据属性的提示！代码现在可以工作了：）

onClick={this.selectCountry.bind(this, "KH")}

selectCountry(e) {
  let country = e.currentTarget.dataset.country;
  // country will be "KH" for example
}