1
當用戶單擊重置按鈕時,我想清除窗體內的下拉菜單。
但無法弄清楚如何以編程方式設置值。Semantic UI React,如何以編程方式在下拉菜單中選擇值?
當用戶單擊重置按鈕時,我想清除窗體內的下拉菜單。
但無法弄清楚如何以編程方式設置值。Semantic UI React,如何以編程方式在下拉菜單中選擇值?
難,沒有看到你的代碼,嘗試設置 '值':[]
Suir河使用聲明API。您需要使用HOC來控制Dropdown的值。
我已經做了一個基本的例子,說明如何處理它。
const {
Button,
Container,
Divider,
Dropdown,
Label,
} = semanticUIReact
const options = [
{ value: 'all', text: 'All' },
{ value: 'articles', text: 'Articles' },
{ value: 'products', text: 'Products' },
]
class App extends React.Component {
constructor(props) {
\t \t super(props);
this.state = { value: 'all' }
}
reset() {
this.setState({ value: undefined })
}
setProducts() {
this.setState({ value: 'products' })
}
setValue(e, data) {
this.setState({ value: data.value })
}
render() {
const { value } = this.state
return (
<Container>
<Label content={`Current: ${value}`} />
<Divider />
<Dropdown
onChange={this.setValue.bind(this)}
options={options}
selection
value={value}
/>
<Divider />
<Button
content='Reset'
onClick={this.reset.bind(this)}
/>
<Button
content='Set products'
onClick={this.setProducts.bind(this)}
/>
</Container>
)
}
}
// ----------------------------------------
// Render to DOM
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)
ReactDOM.render(<App />, mountNode)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://unpkg.com/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">