如何在反应中从语义 ui 制作的下拉列表中传递值

Question

根据语义 ui，我对此 select 有疑问。我用我映射它的值创建了对象，状态正在改变但 Select 中的值没有更新 - 如果我将道具作为默认值，它就像硬编码一样，根本没有改变。那么我可以做什么（e 目标值不起作用）来传递 selected 图标来更改道具状态？我应该使用钩子吗？

import React from 'react';
import { Dropdown } from 'semantic-ui-react';



const Dropdown = () => {
    let icons = [
        {
            "v1": "home",
            "ico": "home"
        },
        {
            "v1": "cart",
            "ico": "cart"
        },
        {
            "v1": "folder",
            "ico": "folder"
        },
        {
          "v1": "group",
          "ico": "group"
      },
      {
          "v1": "dollar",
          "ico": "dollar"
      },
      {
          "v1": "users",
          "ico": "users"
      },
      {
        "v1": "briefcase",
        "ico": "briefcase"
    },
    {
        "v1": "globe",
        "ico": "globe"
    },
    {
        "v1": "calendar",
        "ico": "calendar"
    },
    {
      "v1": "favorite",
      "ico": "favorite"
    },
    ];
    
    const options = icons.map(({ v1, ico }) => ({ value: v1, icon: ico }))


    return(
        <div>
        <Dropdown
        text='Add icon'
        icon='add circle'
        floating
        labeled
        button
        className='icon'
        value={prop.icon}
        options={options}
        name='icon'
      ></Dropdown>
        </div>
    )
}

Answer 1

您可以将 onChange 函数传递给接收两个参数的组件：event 和 result。 result 参数是一个对象，它的键 value 带有下拉列表的选定值。然后，您需要使用 useState 挂钩将所选值保存在组件状态中。

因此，您可以这样做：

 import {useState} from "react"

 const [value, setValue] = useState("")

 const handleChange = (e, result) => {
      // result.value is the selected value from the Dropdown
      setValue(result.value)
  }

 <Dropdown
  onChange={handleChange}
  />

如何在反应中从语义 ui 制作的下拉列表中传递值

How to passe value from dropdown made by semantic ui in react

reactjs

semantic-ui