在默认函数而不是类中使用handleChange

Question

我想使用一个下拉模块与语义UI和反应。问题是在线提供的所有示例都使用默认类App extends Component，但我想导出默认函数App()。当我这样做时，我得到渲染()部分的解析错误，需要一个分号。

下面的工作很好，但我怎么能实现它，如果导出是一个默认的功能，而不是?

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

export default class DropdownExampleControlled extends Component {
state = {}

handleChange = (e, { value }) => this.setState({ value })

render() {
const { value } = this.state

return (
<Dropdown
onChange={this.handleChange}
options={options}
placeholder='Choose an option'
selection
value={value}
/>
)
}
}

在handleChange前面写const并没有解决任何问题，它只是使"value"稍后未定义。我很不确定如何使用这个，因为我是新的JS。如有任何帮助，不胜感激。

Answer 1

使用函数组件而不是类组件你必须使用钩子在反应。下面是你的代码在函数组件中的样子

export default const DropdownExampleControlled = () => {
const [yourState, setYourState] = useState({}); 
// yourState being the name of the state and {} being your initial state
const handleChange = (e, {value}) => {setYourState(value)}
return (
<Dropdown
onChange={handleChange}
options={options}
placeholder='Choose an option'
selection
value={yourState}
/>
)
}

钩子是持久化数据、处理重新渲染的新方法&在现代React中更多。如果你想了解更多关于如何使用钩子的知识，这里有一个链接到文档https://reactjs.org/docs/hooks-intro.html