语义UI React，如何在Dropdown中以编程方式选择值？

Question

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

Answer 1

SUIR使用声明性API。您需要使用HOC来控制Dropdown的值。

我已经做了一个基本的例子来说明如何处理它。

＆＃13;

＆＃13;

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)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果没有看到您的代码就很困难，请尝试设置＆＃39;：[]