如何在Semantic-UI-React的Dropdown中取消选择后恢复原选中值？

当然可以实现啦！核心思路是把Dropdown改成受控组件，手动维护选中值的状态，同时提前保存用户选择custom之前的选中值，这样点击Cancel时就能轻松把状态回滚回去。

下面是具体的实现步骤和代码示例：

核心思路拆解 #

• 维护两个状态变量：一个记录当前Dropdown的选中值，另一个专门保存用户选择custom前的历史选中值
• 给Dropdown绑定onChange事件，根据选中的选项类型做不同处理：
  • 如果选中的是custom，先把当前选中值存到历史变量里，再更新选中值并弹出对话框
  • 如果是普通颜色选项，直接更新选中值即可
• 对话框的Cancel按钮点击时，把当前选中值重置为历史值，同时关闭对话框

完整代码示例 #

import React, { useState } from 'react';
import { Dropdown, Modal, Button } from 'semantic-ui-react';

const colorOptions = [
  { text: 'red', value: 'red' },
  { text: 'blue', value: 'blue' },
  { text: 'custom', value: 'custom' }
];

const Foo = () => {
  // 初始选中red
  const [selectedColor, setSelectedColor] = useState('red');
  // 保存之前的选中值，初始值和默认选中值一致
  const [previousColor, setPreviousColor] = useState('red');
  const [showModal, setShowModal] = useState(false);

  const handleDropdownChange = (e, { value }) => {
    if (value === 'custom') {
      // 先把当前选中的颜色存起来，用于后续恢复
      setPreviousColor(selectedColor);
      // 更新选中值为custom
      setSelectedColor(value);
      // 打开自定义颜色对话框
      setShowModal(true);
    } else {
      // 选择普通颜色时，直接更新选中值
      setSelectedColor(value);
    }
  };

  const handleCancel = () => {
    // 点击Cancel时，恢复到之前选中的颜色
    setSelectedColor(previousColor);
    // 关闭对话框
    setShowModal(false);
  };

  const handleOk = () => {
    // 这里可以添加自定义颜色的处理逻辑，比如获取用户输入的颜色值
    // 示例中暂时仅关闭对话框，你可以根据需求修改（比如更新selectedColor为自定义颜色）
    setShowModal(false);
  };

  return (
    <>
      <Dropdown
        placeholder='color'
        search
        selection
        options={colorOptions}
        value={selectedColor} // 受控组件，绑定当前选中值
        onChange={handleDropdownChange} // 绑定选中变化事件
      />
      <Modal open={showModal}>
        <Modal.Header>选择自定义颜色</Modal.Header>
        <Modal.Content>
          <p>这里可以添加自定义颜色选择器或输入框等交互元素</p>
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={handleCancel} negative>
            Cancel
          </Button>
          <Button onClick={handleOk} positive>
            OK
          </Button>
        </Modal.Actions>
      </Modal>
    </>
  );
};

export default Foo;

关键细节说明 #

1. 受控组件的使用：通过给Dropdown设置value和onChange，让组件的选中状态完全由我们的状态变量控制，这是实现回滚的基础
2. 历史值的备份时机：必须在选中custom的瞬间就备份当前值，这样Cancel时才能拿到正确的历史选中项
3. 类组件适配：如果你用的是类组件，只需要把useState换成this.state和this.setState，核心逻辑完全一致

内容的提问来源于stack exchange，提问作者Searene