我想使用帶有語意 UI 的下拉模塊并做出反應。問題是在線提供的所有示例都使用默認類 App extends Component 但是我想匯出默認函式 App()。當我這樣做時，我收到 render() 部分的決議錯誤，需要分號。
下面的效果很好，但是如果匯出是默認函式，我該如何實作呢？
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 并沒有解決任何問題，它只是使“值”在以后未定義。我非常不確定如何使用它，因為我是 JS 的新手。任何幫助是極大的贊賞。
uj5u.com熱心網友回復：
當使用函陣列件而不是類組件時，你必須使用 React 中的鉤子。這是您的代碼在功能組件中的外觀
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}
/>
)
}
Hooks 是現代 React 中持久化資料、處理重新渲染等的更新方式。如果你想了解更多關于如何使用鉤子的資訊，這里有一個指向檔案的鏈接https://reactjs.org/docs/hooks-intro.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/534693.html
標籤：javascript反应
下一篇：如何移動圖示或按鈕onclick