我使用 Semantic-UI-React 创建了一个下拉列表,让用户选择颜色。
代码如下。
import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';
const colorOptions = [{
text: 'red',
value: 'red'
}, {
text: 'blue',
value: 'blue'
}, {
text: 'custom',
value: 'custom'
}];
const Foo = () => (
<Dropdown
placeholder='color'
search
selection
options={colorOptions} />
)
export default Foo
假设当前选择的颜色是红色。现在用户点击 custom
。然后一个对话框将显示更多颜色。对话框中有两个按钮。确定并取消。
我想要的是,当用户点击 Cancel
时,所选颜色将恢复为之前的颜色,red
,而不是 custom
。可以用 Semantic-UI-react 来完成吗?
最佳答案
你可以为此使用state
。
我假设您有另一个组件正在呈现您的 Foo
组件(因为您将其代码粘贴为无状态函数)
- 在
Dropdown
组件中使用onChange
,以便跟踪当前值。如果您需要有关onChange
如何工作的更多信息,请查看他们的 docs .
例如:
const Foo = (onChange, value) => (
<Dropdown
placeholder='color'
search
selection
options={colorOptions}
onChange={onChange}
value={value}
/>
)
- 在每个
onChange
上,将此值保存在状态中并保留先前值的副本。因为setState
是 asynchronous你可以很容易地做到这一点:
示例:
handleChange(event, data) {
this.setState(prevState => ({
previousValue: prevState.value,
value: data
}))
}
- 当您点击“取消”按钮时,只需将下拉菜单的值恢复为之前的值即可。
例子:
onCancel() {
this.setState(prevState => ({
value: prevState.previousValue
}))
}
- 在
render
上总是将value
传递给Foo
组件
示例:
<Foo onChange={handleChange} value={this.state.value} ... />
关于javascript - 以编程方式在 Semantic-UI-React 的下拉列表中选择一个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48097600/