2

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

4

2 回答 2

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

于 2017-02-14T13:23:30.810 回答
-1

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

于 2017-02-13T01:25:58.817 回答