reactjs - 单击下拉菜单链接后如何在反应中更改语言下拉按钮图像？

Question

我正在尝试学习反应，因此我正在尝试将我不久前建立的静态 html 网站转换为反应。该网站有两种语言的内容：英语和德语。我创建了一个自定义下拉元素，其中包含一个带有美国国旗图像的按钮，用于切换下拉菜单，以及一个下拉菜单本身包含两个链接：第一个用于英文版，另一个用于德文版网站，每个都包含图像一个标志和一个命名语言的跨度。我在布局组件中使用反应路由器导航到英语和德语，并且路由工作正常，但是在切换语言后切换下拉按钮标志图像时遇到问题。

这是我的下拉组件的样子：

import React, { Component } from 'react';
import DropdownLink from './DropdownLink/DropdownLink';

import FlagEn from '../../../assets/images/lang/flag-en.svg';
import FlagDe from '../../../assets/images/lang/flag-de.svg';

class Dropdown extends Component {
    constructor() {
        super();

        this.state = {
            showMenu: false,
        };

        this.showMenu = this.showMenu.bind(this);
        this.closeMenu = this.closeMenu.bind(this);
    }

    showMenu(event) {
        event.preventDefault();

        this.setState({ showMenu: true }, () => {
            document.addEventListener('click', this.closeMenu);

        });
    }

    closeMenu(event) {    
        if (!this.dropdownMenu.contains(event.target) || this.dropdownMenu.contains(event.target)) {

            this.setState({ showMenu: false }, () => {
                document.removeEventListener('click', this.closeMenu);
            });  

        }
    }

    render() {
        const dropdownLinks = [
            { href: '../en', linkText: 'English', linkImg: FlagEn, imgAlt: 'English' },
            { href: '../de', linkText: 'Deutsch', linkImg: FlagDe, imgAlt: 'Deutsch' }
        ];
        let dropdownMenuShow = null;
        if (this.state.showMenu) {
            dropdownMenuShow = <div 
                className="dropdown-menu" 
                ref={(element) => {
                    this.dropdownMenu = element;
                }}>
                {dropdownLinks.map(dropdownLink => (
                    <DropdownLink 
                        onClick={this.showMenu}
                        href={dropdownLink.href} 
                        linkText={dropdownLink.linkText} 
                        key={dropdownLink.linkText} 
                        linkImg={dropdownLink.linkImg} 
                        imgAlt={dropdownLink.imgAlt} />
                ))}
            </div>
        }
        return (
            <div className="dropdown">
                <button className="dropdown-toggle" type="button" id="dropdownMenuButton" onClick={this.showMenu}>
                    <img src={FlagEn} alt="english" />
                </button>
                {dropdownMenuShow}
            </div>
        );
    }
}

export default Dropdown;

这是我的 DropdownLink 组件：

import React from 'react';
import { NavLink } from 'react-router-dom';

const dropdownLink = (props) => (
    <NavLink className="dropdown-item" to={props.href} exact>
        <img src={props.linkImg} alt={props.imgAlt} />
        <span>{props.linkText}</span>
    </NavLink>
);

export default dropdownLink;

有没有办法切换下拉按钮的标志图像，以便在选择英语和德语的德国国旗时出现美国国旗？链接正在路由到“/en”和“/de”。

标签： reactjs

Answer 1

您可以添加一个函数来更新您在按钮中显示的图像并将其传递到组件中。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import DropdownLink from './DrowdownLink';

    export default class Test extends React.Component {
        constructor() {
            super();

            this.state = {
                showMenu: false,
                buttonFlag: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQb9JntXqHxGA9U_q4nJYzi1f5lzHWKReT3OwYNyydpNuFd9B0e'
            };

            this.showMenu = this.showMenu.bind(this);
            this.closeMenu = this.closeMenu.bind(this);
            this.updateFlag = this.updateFlag.bind(this);
        }

        showMenu(event) {
            event.preventDefault();

            this.setState({ showMenu: true }, () => {
                document.addEventListener('click', this.closeMenu);

            });
        }

        closeMenu(event) {
            if (!this.dropdownMenu.contains(event.target) || this.dropdownMenu.contains(event.target)) {

                this.setState({ showMenu: false }, () => {
                    document.removeEventListener('click', this.closeMenu);
                });

            }
        }

        updateFlag(link) {
            console.log(link);
            this.setState({ buttonFlag: link })
        }

        render() {
            const dropdownLinks = [
                { href: '../en', linkText: 'English', linkImg: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQb9JntXqHxGA9U_q4nJYzi1f5lzHWKReT3OwYNyydpNuFd9B0e', imgAlt: 'English' },
                { href: '../de', linkText: 'Deutsch', linkImg: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDqHreeGXhpRqWg8YwpjAPfv6_HXy7nEatEU8ec2KWxtI0LnBRLQ', imgAlt: 'Deutsch' }
            ];
            let dropdownMenuShow = null;
            if (this.state.showMenu) {
                dropdownMenuShow = <div
                    className="dropdown-menu"
                    ref={(element) => {
                        this.dropdownMenu = element;
                    }}>
                    {dropdownLinks.map(dropdownLink => (
                        <DropdownLink
                            onClick={this.showMenu}
                            href={dropdownLink.href}
                            linkText={dropdownLink.linkText}
                            key={dropdownLink.linkText}
                            linkImg={dropdownLink.linkImg}
                            updateFlag={this.updateFlag}
                            imgAlt={dropdownLink.imgAlt} />
                    ))}
                </div>
            }
            return (
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <button className="dropdown-toggle" type="button" id="dropdownMenuButton" onClick={this.showMenu}>
                        <img src={this.state.buttonFlag} alt="english" />
                    </button>
                    {dropdownMenuShow}
                </div>
            );
        }
    }

按钮的 src 现在从状态中拉出，状态从 DropdownLink 组件内部更新，我们使用一个名为updateFlag的 prop 传入的函数。另外我没有这些资源，所以我只使用了两个链接来在线标记图片。

这是 DropdownLink 组件

    import React from 'react';
    import { NavLink } from 'react-router-dom';

    const dropdownLink = (props) => (
        <div className="dropdown-item" exact>
            <img onClick={() => props.updateFlag(props.linkImg)} src={props.linkImg} alt={props.imgAlt} />
            <span>{props.linkText}</span>
        </div>
    );

    export default dropdownLink;

希望有帮助！