是否从语义界面下拉项中检索值？

Question

有没有办法检索dropdown items值？当on-click处理程序被调用时，它不会返回值，而是返回text和IMG组件。并且附加到dropdown的on onchange处理程序永远不会被触发

import React from "react";
import { Dropdown, Item } from "semantic-ui-react";
import { connect } from "react-redux";
import "./currency.style.css";

const CurrencyConverter = ({ currencyDetails, initialData }) => {
  const handleSelection = (e) => {
    alert();
  };

  return (
    <div className="currency-form">
      <div className="selected-Country">
        <img src={initialData.flag} width="30px" height="30px" />
      </div>
      <Dropdown
        inline
        text={initialData.currency}
        
      >
        <Dropdown.Menu
          
        >
          {currencyDetails.map((item) => (
            <Dropdown.Item
              key={Math.random()}
              text={item.currencyName}
              image={item.flag}
              style={{ height: "70px", fontSize: "17px" }}
              onClick={(event, item) => {
                console.log(item);
              }}
            />
          ))}
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
};

const mapStateToProps = ({ currency: { currencyDetails } }) => ({
  currencyDetails,
});
export default connect(mapStateToProps, null)(CurrencyConverter);

Answer 1

第一步是将“值”作为Dropdown.Item的一部分进行赋值：

            <Dropdown.Item
              key={Math.random()}
              text={item.currencyName}
              image={item.flag}
              value={item.value}
              style={{ height: "70px", fontSize: "17px" }}
              onClick={(event, item) => {
                console.log(item);
              }}
            />

然后，您可以从onClick事件传递的item中获取“value”。

onClick={(event, item) => console.log(item.value)}

只要在初始下拉菜单中设置' value‘而不是'text’，就可以让下拉菜单在不活动时显示正确的值

下面是您的代码的一个稍微简化的版本：

const currencyDetails = [
    {currencyName: 'United States Dollars', value: 'USD'},
    {currencyName: 'Canadian Dollars', value: 'CDN'}
]
const initialData = {currency: 'USD'}

const CurrencyConverter = () => {

  const handleSelection = (e, value) => {
        console.log(value)
        alert(`"I Chose the value ${value.value}`)
  }

  return (
    <div className="currency-form">
      <Dropdown
        inline
        value={initialData.currency}
      >
        <Dropdown.Menu
        >
          {currencyDetails.map((item) => (
            <Dropdown.Item
              key={item.currencyName}
              value={item.value}
              text={item.currencyName}
              style={{ height: "70px", fontSize: "17px" }}
              onClick={handleSelection}
            />
          ))}
        </Dropdown.Menu>
      </Dropdown>
    </div>
  )
}

要阅读更多信息，请查看文档：

https://react.semantic-ui.com/modules/dropdown/#usage-controlled