Semantic UI React，如何以编程方式在下拉菜单中选择值？答案

【问题标题】：Semantic UI React, How to programatically select value in Dropdown?Semantic UI React，如何以编程方式在下拉菜单中选择值？
【发布时间】：2017-02-09 03:19:58
【问题描述】：

当用户单击重置按钮时，我想清除表单内的下拉菜单。
但无法弄清楚如何以编程方式设置值。

【问题讨论】：

标签： semantic-ui semantic-ui-react

【解决方案1】：

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) {
		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">

【讨论】：

感谢您的回答，但它似乎重置了下拉列表本身..

【解决方案2】：

很难看不到你的代码，尝试设置'value'：[]

【讨论】：