Question

免责声明：我是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 }

但是，它不起作用，对话框打开时出现错误，就好像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;

我知道为什么会出现这个错误？

谢谢！

Answer 1

当你这样做时

CONTAINS('aa|bb|cc', 'b', '|') == false

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

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

甚至更好，制作一个传递国家名称的绑定函数，如此

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

但是，由于您在点击的那些元素中有onClick={this.selectCountry.bind(this, "KH")}个属性，因此您可以只放置data-并在onClick={this.selectCountry}处理程序中，您可以像这样重写< / p>

selectCountry

Answer 2

<div className="Country-flag-big" onClick={this.selectCountry("KH")} data-country={"KH"} />语句导致错误。

应该是

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

在每个地方

它在你的情况下不起作用的原因是onClick需要一个函数但是onClick={this.selectCountry("KH")}你实际上给它一个由selectCountry函数重新调整的值。由于您在selectCountry中设置状态，因此再次调用渲染，并且每次调用render时，将评估selectCountry以将值返回到onClick。您需要绑定函数以传递值。

你的渲染功能将是

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>
    );  
}

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

2 个答案: