Question

我使用如下所示的语义UI反应下拉菜单，在页面上选择了语言下拉菜单。

js代码如下所示。

import React from "react";
import {CustomDropListStyle} from './style.js'
import { Dropdown } from 'semantic-ui-react'

const options = [
    {
        key: 'English',
        text: 'English',
        value: 'English',
        image: { avatar: true, src: 'src/images/avatar/hawk.png' },
    },
    {
        key: 'Chinese',
        text: 'Chinese',
        value: 'Chinese',
        image: { avatar: true, src: 'src/images/avatar/hawk.png' },
    },
    {
        key: 'Spanish',
        text: 'Spanish',
        value: 'Spanish',
        image: { avatar: true, src: 'src/images/avatar/hawk.png' },
    },
    {
        key: 'French',
        text: 'French',
        value: 'French',
        image: { avatar: true, src: 'src/images/avatar/gra.png' },
    },
    {
        key: 'German',
        text: 'German',
        value: 'German',
        image: { avatar: true, src: 'src/images/avatar/hawk.png' },
    },
    {
        key: 'Portuguese',
        text: 'Portuguese',
        value: 'Portuguese',
        image: { avatar: true, src: 'src/images/avatar/hawk.png' },
    },
]

class CustomDropList extends React.Component {
    render() {
        return (
            <CustomDropListStyle>
                <Dropdown> 
                    fluid 
                    selection 
                    toggleItem 
                    options={options}
                </Dropdown>
            </CustomDropListStyle>
        );
    }
}
export default CustomDropList;

然后我尝试使用Dropdown属性（例如“ icon”和“ item”）在页眉中显示图像，但是没有用。请帮助我解决此问题。

Answer 1

我用如下标签解决了这个问题。我认为，如果无法在同一字段中插入对象，请尝试将其插入其他字段并更改其位置。 js代码的主体是：

import React from "react";
import {CustomDropListStyle} from './style.js';
import {Dropdown}  from 'semantic-ui-react';
import strings from "../../consts/string";
import PropTypes from 'prop-types';


const options = [
    {
        key: 'English',
        text: 'English',
        value: 'en',
        image: { avatar: true, src: 'img/images/avatar/en.png' },
    },
    {
        key: 'Chinese',
        text: 'Chinese',
        value: 'ch',
        image: { avatar: true, src: 'img/images/avatar/ch.png' },
    },
    {
        key: 'Spanish',
        text: 'Spanish',
        value: 'sp',
        image: { avatar: true, src: 'img/images/avatar/sp.png' },
    },
    {
        key: 'French',
        text: 'French',
        value: 'fr',
        image: { avatar: true, src: 'img/images/avatar/fr.png' },
    },
    {
        key: 'German',
        text: 'German',
        value: 'ge',
        image: { avatar: true, src: 'img/images/avatar/ge.png' },
    },
    {
        key: 'Portuguese',
        text: 'Portuguese',
        value: 'pt',
        image: { avatar: true, src: 'img/images/avatar/pt.png' },
    },
];
class CustomDropList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sel_lang:strings.getLanguage()
    };
  }

  exposedCampaignOnChange = (e, {value}) => {
    e.persist();
    this.setState({
      sel_lang: value,
    });
    console.log(this.state.sel_lang);
    strings.setLanguage(value);
    localStorage.setItem('lang', value);
  };

    render() {
      if( this.props.isLogged ){
        let label_lang = 'English';
        switch (this.state.sel_lang) {
          case 'en':
            label_lang = 'English';
            break;
          case 'ch':
            label_lang = '汉语';
            break;
          case 'sp':
            label_lang = 'English';
            break;
          case 'fr':
            label_lang = 'English';
            break;
          case 'pt':
            label_lang = 'English';
            break;
          case 'ge':
            label_lang = 'English';
            break;
          default:
            break;
        }
        return (
          <CustomDropListStyle>
            <h1 className="sellang_lbl_logged">{label_lang}</h1>
            <img className="sellang_img_logged" src={`img/images/avatar/${this.state.sel_lang}.png`}/>
          </CustomDropListStyle>
        );
      }else {
        return (
          <CustomDropListStyle>
            <img className="sellang_img" src={`img/images/avatar/${this.state.sel_lang}.png`}/>
            <Dropdown
              fluid
              options={options}
              onChange={this.exposedCampaignOnChange}
              defaultValue={strings.getLanguage()}
            />
          </CustomDropListStyle>
        );
      }
    }
}

CustomDropList.propTypes = {
  isLogged: PropTypes.bool,
};

export default CustomDropList;

css代码是：

import styled from "styled-components";

export const CustomDropListStyle = styled.label`
    .ui.fluid.dropdown, .ui.fluid.dropdown:hover .ui.upward.dropdown>.menu {
        display: block;
        width: 100%;
        min-width: 170px;
        max-width: 170px;
        font-size:16px;
        border:0;
    }

    .ui.selection.active.dropdown:hover {
        box-shadow:none;
        font-size:16px;
        border-radius:0;

    }
    .ui.active.visible.fluid.selection.dropdown {
        font-size:14px;
        border-radius:0;
    }
    .ui.dropdown .menu {
        left: 0;        
        position:relative;      
    }
    .ui.dropdown{
         margin-top:6%;
         margin-right:1%;
         text-align:center;
    }
    .ui.selection.dropdown {
        border-bottom:1px solid #97a5ad;
        border-radius:0;
    }
    .ui.selection.active.dropdown {
        border-bottom:0px solid #97a5ad;
    }
    .ui.avatar.image {
        border-radius:50%;
    }
    .visible.transition{
        border:1px solid #97a5ad !important;    
    }
    .ui.selection.dropdown .menu, .ui.selection.dropdown .menu:hover {

        border-radius: 6px;
        margin:4px 0 4px 0;
        border:1px solid #97a5ad !important;
    }
    .ui.upward.selection.dropdown.visible {
        border-radius:0 !important;
    }
    .ui.upward.dropdown>.menu, .ui.upward.dropdown>.menu:hover {
        border-radius: 6px;
        margin:16px 0 4px 0;
        border:1px solid #97a5ad !important;
    }

    i.af.flag::before{
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius:50%;
    }
    i.icon.dropdown::before, .ui.dropdown>.dropdown.icon:before {
         border-width: 5px 5px 0;
         content: ' ';
         display: block;
         margin-top: -ceil(2.5);
         position: absolute;
         right: 1%;
         width: 9px;
         height: 9px;
         border: solid #97a5ad;
         border-width: 0 1px 1px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         vertical-align:middle !important;         
    }
    .ui.dropdown>.dropdown.icon {
        margin: 2px 0 0 1em;
    }        
    .ui.dropdown .menu>.item, .active selected item {
        position: relative;
        cursor: pointer;
        display: block;
        border: none;
        height: auto;
        text-align: left;
        border-top: none;
        line-height: 1em;
        color: rgba(0,0,0,.87);
        padding: .78571429rem 1.14285714rem!important;
        font-size: 15px;
        text-transform: none;
        font-weight: 400;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-touch-callout: none;
    }
    .sellang_img {
        width:20%;
        height:20%;
        float:left;
    }
    .sellang_img_logged {
        float:right;
         width:40%;
        height:40%;
    }
    .sellang_lbl_logged {
      vertical-align:middle;
      margin:-25% 12%;
    }    
`;

然后的结果是： Getting Started with AWS IoT Analytics

如何在“语义UI反应下拉菜单”中选择图像？

1 个答案: