1 changed files with 50 additions and 0 deletions
@ -0,0 +1,50 @@ |
|||
--- |
|||
order: 3 |
|||
title: 受控模式 |
|||
--- |
|||
|
|||
结合 `Tag` 的 `TagSelect` 组件,方便的应用于筛选类目的业务场景中。 |
|||
|
|||
```jsx |
|||
import { Button } from 'antd'; |
|||
import TagSelect from 'ant-design-pro/lib/TagSelect'; |
|||
|
|||
class Demo extends React.Component { |
|||
state = { |
|||
value: ['cat1'], |
|||
}; |
|||
handleFormSubmit = value => { |
|||
this.setState({ |
|||
value, |
|||
}); |
|||
}; |
|||
checkAll = () => { |
|||
this.setState({ |
|||
value: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6'], |
|||
}); |
|||
}; |
|||
render() { |
|||
return ( |
|||
<div> |
|||
<Button onClick={this.checkAll}>全部</Button> |
|||
<div |
|||
style={{ |
|||
padding: 16, |
|||
}} |
|||
> |
|||
<TagSelect hideCheckAll={true} value={this.state.value} onChange={this.handleFormSubmit}> |
|||
<TagSelect.Option value="cat1">类目一</TagSelect.Option> |
|||
<TagSelect.Option value="cat2">类目二</TagSelect.Option> |
|||
<TagSelect.Option value="cat3">类目三</TagSelect.Option> |
|||
<TagSelect.Option value="cat4">类目四</TagSelect.Option> |
|||
<TagSelect.Option value="cat5">类目五</TagSelect.Option> |
|||
<TagSelect.Option value="cat6">类目六</TagSelect.Option> |
|||
</TagSelect> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ReactDOM.render(<Demo />, mountNode); |
|||
``` |
|||
Loading…
Reference in new issue