如何在React函数组件中使用Semantic UI Dropdown的handleChange？

首先，你遇到的render()语法错误是因为函数组件不需要写render方法——函数组件本身就是直接返回JSX的函数，不用像类组件那样包裹在render()里。下面是完整的改写方案，同时解决你提到的value未定义问题：

改写后的完整代码 #

import React, { useState } from 'react'
import { Dropdown } from 'semantic-ui-react'

// 补全原代码中缺失的options示例（可根据实际需求修改）
const options = [
  { key: 'option1', text: '选项1', value: 'option1' },
  { key: 'option2', text: '选项2', value: 'option2' },
  { key: 'option3', text: '选项3', value: 'option3' },
]

export default function DropdownExampleControlled() {
  // 用useState初始化状态，替代类组件的this.state
  const [value, setValue] = useState('')

  // 函数组件里的事件处理函数，无需绑定this
  const handleChange = (e, { value: selectedValue }) => {
    setValue(selectedValue)
  }

  // 直接返回JSX，不需要render()方法包裹
  return (
    <Dropdown
      onChange={handleChange}
      options={options}
      placeholder='Choose an option'
      selection
      value={value}
    />
  )
}

关键改动说明 #

1. 清理导入：删掉Component，函数组件不需要继承React.Component
2. 状态替换：用useState钩子创建value状态和更新函数setValue，替代类组件的this.state与this.setState
3. 事件处理调整：
   • 直接定义const handleChange即可，函数组件没有this，无需额外绑定
   • 参数里用selectedValue重命名（避免和外层value变量冲突），调用setValue更新状态
4. 移除render()：函数组件直接返回JSX内容，不需要render()方法包裹

你之前遇到的value未定义问题，是因为没通过useState正确初始化状态，同时函数组件里不能用this.state.value取值，要直接使用useState返回的value变量。

内容的提问来源于stack exchange，提问作者ati