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