javascript - 根据 ReactJS 中的当前状态在单击时显示/隐藏组件

Question

免责声明:我是 ReactJS 的新手

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

思路如下:

• 右上角有一个小旗帜按钮，用户可以点击(CountryFlag)
• 单击后，会显示一个对话框 (Dialog)，其中包含 5 个国家/地区(国旗)，每个国家/地区有 2 种可能的语言选择。选择国家(例如 LA)和语言(例如 lo)会生成特定的语言环境，例如 lo-LA。

我的对话框最初是这样的:

点击越南国旗后，它应该变成这样:

点击国旗后，我希望在国旗右侧出现两个按钮 (divs)，以便用户可以选择一种语言。所以我试图根据与所选语言对应的当前状态有条件地添加 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 事件并产生了冲突:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to 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;

知道为什么会出现此错误吗？

谢谢!

Answer 1

当你这样做的时候

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

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

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

或者更好的是，制作一个传入国家名称的绑定(bind)函数，就像这样

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
}