gpt4 book ai didi

javascript - 单击语义 UI React 中的下拉项时如何触发模式?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:40:12 25 4
gpt4 key购买 nike

我有一个下拉菜单和一个模态框,我想在单击其中一个下拉项时显示模态框。是否可以?我找不到这样做的方法,因为我无法获得目标 DropdownItem,这是 Modal 的触发 Prop 所需要的。

export class Demo extends React.Component<{}, {}> {
private options = [
{ text: 'doNothing', value: 'doNothing' },
{ text: 'openModal', value: 'openModal' },
]
render() {
return (
<div>
<Dropdown
fluid
selection
options={this.options}
defaultValue={this.options[0].value} />

<Modal trigger={<Button>trigger</Button>}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
</div>
)
}
}

最佳答案

您可以使用 Modal 的属性 open 以编程方式控制它。当您检测到所需的 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>
)
}
}

关于javascript - 单击语义 UI React 中的下拉项时如何触发模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48043268/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com