以编程方式 select 语义-UI-React 下拉列表中的一个项目

Question

我使用 Semantic-UI-React 创建了一个下拉列表，让用户使用 select 颜色。

代码如下

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

假设当前 selected 颜色是红色。现在用户点击 custom。然后一个对话框将显示更多颜色。对话框中有两个按钮。确定并取消。

我想要的是，当用户点击 Cancel 时，selected 颜色会恢复到之前的颜色 red，而不是 custom.可以用 Semantic-UI-react 来完成吗？

Answer 1

你可以使用 state。

我假设您有另一个组件正在呈现您的 Foo 组件（因为您将其代码粘贴为无状态函数）

在 Dropdown 组件中使用 onChange，以便跟踪当前值。如果您需要有关 onChange 如何工作的更多信息，请查看他们的 docs.

例如：

const Foo = (onChange, value) => (
  <Dropdown
    placeholder='color'
    search
    selection
    options={colorOptions}
    onChange={onChange}
    value={value}
  />
)

在每个 onChange 上，将此值保存在 state 上并保留先前值的副本。由于 setState 是 asynchronous 你可以很容易地做到这一点：

示例：

handleChange(event, data) {
  this.setState(prevState => ({
    previousValue: prevState.value,
    value: data
  }))
}

当您单击 "Cancel" 按钮时，只需将下拉菜单的值恢复为之前的值。

示例：

onCancel() {
  this.setState(prevState => ({
    value: prevState.previousValue
  }))
}

在 render 上总是将 value 传递给 Foo 组件

示例：

<Foo onChange={handleChange} value={this.state.value} ... />

以编程方式 select 语义-UI-React 下拉列表中的一个项目

Programmatically select an item in Dropdown in Semantic-UI-React

html

javascript

reactjs

semantic-ui

semantic-ui-react