我有一个下拉菜单和一个模态,我想在点击其中一个下拉项目时显示模态。可能吗?我无法找到一种方法,因为我无法获得目标DropdownItem,这是Modal的触发道具所必需的。
setPreferredDevice()
答案 0 :(得分:5)
您可以使用open
的道具Modal
以编程方式控制它。当您检测到所需的Dropdown
项目被恰当地点击setState
时。
这些内容之类的东西。
import * as React from 'react';
export class Demo extends React.Component<{}, {}> {
state = {
options: [
{ text: 'doNothing', value: 'doNothing' },
{ text: 'openModal', value: 'openModal' }
],
open: false
};
onClose = () => this.setState({open: false});
onChange = (selected) => {
// if the correct one is selected then...
// this.setState({open: true});
}
render() {
return (
<div>
<Dropdown
fluid
selection
options={this.options}
onChange={this.onChange}
defaultValue={this.options[0].value} />
<Modal open={this.state.open} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
</div>
)
}
}