0
免责声明上单击组件：我是新来ReactJS显示/隐藏基于当前状态ReactJS
我想实现一个对话窗口，在我的应用程序的第一页上选择国家/语言。
的想法是这样的：
- 没有在右上角小旗子按钮，用户可以点击（CountryFlag）
- 单击时，对话（对话）显示5个国家（标志），并为每个国家，2种可能的语言选择。选择一个国家（例如LA）和语言（例如lo）会导致特定区域设置，例如lo-LA。
我的对话框最初看起来是这样的：
点击越南国旗后，它应该变成这样：
点击后国旗，我想要两个按钮（div）出现在旗子的右侧，以便使用r可以选择一种语言。所以，我想基于对应于所选语言的当前状态有条件地添加的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 }
但是，这是行不通的，在对话框打开时，有一个错误，就像onClick事件是触发已经和结果产生冲突：
警告：的setState（...）：现有状态 转变（如
render内或其他部件的构造 ）期间无法更新。渲染方法应该是道具和纯粹功能的状态;构造函数的副作用是反模式，但可以将 移动到componentWillMount。
下面是完整的组件代码：
import React from 'react';
import ReactDOM from 'react-dom';
import './CountryFlag.css';
var Dialog = React.createClass({
getInitialState: function() {
return { countrySelected: "" };
},
close(){
ReactDOM.unmountComponentAtNode(this.props.container);
},
componentWillUnmount() {
document.body.removeChild(this.props.container);
},
selectCountry(country) {
console.log('this is c:', country);
this.setState({countrySelected: country});
},
selectLocale() {
console.log('this is:', this);
ReactDOM.unmountComponentAtNode(this.props.container);
},
render(){
return(
<div className="Country-dialog-overlay">
<div className="Country-dialog-inner">
<h2>Country > Language</h2>
<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("LA")} data-country={"LA"} />
{ this.state.countrySelected==="LA" ? <div className="Language-big" onClick={this.close} data-locale={"lo-LA"} >ພາສາລາວ</div> : null }
{ this.state.countrySelected==="LA" ?<div className="Language-big" onClick={this.close} data-locale={"en-LA"} >English</div> : null }
<div className="Country-flag-big" onClick={this.selectCountry("MM")} data-country={"MM"} />
{ this.state.countrySelected==="MM" ? <div className="Language-big" onClick={this.close} data-locale={"my-MM"} >မြန်မာ</div> : null }
{ this.state.countrySelected==="MM" ? <div className="Language-big" onClick={this.close} data-locale={"en-MM"} >English</div> : null }
<div className="Country-flag-big" onClick={this.selectCountry("TH")} data-country={"TH"} />
{ this.state.countrySelected==="TH" ? <div className="Language-big" onClick={this.close} data-locale={"th-TH"} >ภาษาไทย</div> : null }
{ this.state.countrySelected==="TH" ? <div className="Language-big" onClick={this.close} data-locale={"en-TH"} >English</div> : null }
<div className="Country-flag-big" onClick={this.selectCountry("VN")} data-country={"VN"} />
{ this.state.countrySelected==="VN" ? <div className="Language-big" onClick={this.close} data-locale={"vi-VN"} >Tiếng việt</div> : null }
{ this.state.countrySelected==="VN" ? <div className="Language-big" onClick={this.close} data-locale={"en-VN"} >English</div> : null }
</div>
</div>
);
}
});
var Trigger =() => {
function showDialog() {
var div = document.createElement('div');
ReactDOM.render(
<Dialog container={div}/>,
document.body.appendChild(div)
);
}
return (
<div className="Country-flag" onClick={showDialog} data-country={"VN"} />
);
};
class CountryFlag extends React.Component {
render() {
return (
<Trigger />
);
}
}
export default CountryFlag;
任何想法，为什么我有这样的错误？
谢谢！
非常感谢这个详细的回答，一为尖以优雅的方式使用数据属性！代码现在工作:) – ceyquem