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

时间:2018-01-04 14:41:08

标签: javascript html reactjs semantic-ui semantic-ui-react

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

enter image description here

代码如下。

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做出反应吗?

1 个答案:

答案 0 :(得分:3)

您可以使用state

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

  1. onChange组件中使用Dropdown,以便跟踪当前值。如果您需要有关onChange工作原理的更多信息,请查看他们的docs
  2. 例如:

    const Foo = (onChange, value) => (
      <Dropdown
        placeholder='color'
        search
        selection
        options={colorOptions}
        onChange={onChange}
        value={value}
      />
    )
    
    1. 在每个onChange上,将此值保存在状态中,并保留前一个值的副本。由于setStateasynchronous,您可以轻松地执行此操作:
    2. 示例:

      handleChange(event, data) {
        this.setState(prevState => ({
          previousValue: prevState.value,
          value: data
        }))
      }
      
      1. 点击&#34;取消&#34;按钮只是将下拉菜单值恢复为上一个值。
      2. 示例:

        onCancel() {
          this.setState(prevState => ({
            value: prevState.previousValue
          }))
        }
        
        1. on render始终将value传递给Foo组件
        2. 示例:

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