以编程方式在Semantic-UI-React中的Dropdown中选择一个项目

Question

我使用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做出反应吗？

Answer 1

你可以使用state。

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

1. 在onChange组件中使用Dropdown，以便跟踪当前值。你是否需要更多关于onChange如何工作的信息检查他们的docs。

例如：

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

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

例：

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

3. 单击“取消”按钮时，只需将“下拉列表”的值恢复为上一个值。

例：

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

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

例：

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