Semantic UI React, Wie programmatischer Wert in Dropdown auswählen?

Question

Ich möchte Dropdown in einem Formular löschen, wenn ein Benutzer auf Reset-Taste klickt.
Aber kann nicht herausfinden, wie man den Wert programmatisch einstellt.

Answer 1

Schwierig, ohne den Code zu sehen, versuchen Einstellung 'value': []

Answer 2

SUIR verwendet deklarative API. Sie müssen HOC verwenden, um den Dropdown-Wert zu steuern.

Ich habe ein grundlegendes Beispiel gemacht, das zeigt, wie man damit umgeht.

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