如何使用按钮清除语义 UI React 中的多选下拉列表？

Question

我在 React 功能组件中有一个语义 UI React Multiselect Dropdown 并希望在菜单中包含按钮（仍然需要将它们居中...）

如何使用 'Clear' 按钮清除所选值？我可以使用 'x' 图标清除选择，但它内置于组件中。

    <Dropdown
        search
        multiple
        selection
        clearable
        closeOnSelectionChange={false}
        options={filterInitialSuggestions()}
        className='selectDropdown'
        header={dropdownButtons()}
    />
        
    const dropdownButtons = () => {
        return (
            <div>
                <Button positive size='mini'>
                    Save
                </Button>
                <Button grey size='mini' onClick={() => console.log('I want to reset the multi select dropdown')}>
                    Clear
                </Button>
                <Divider />
            </div>
        );
    };

Answer 1

import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';


const options = [
    { key: 1, text: 'Choice 1', value: 1 },
    { key: 2, text: 'Choice 2', value: 2 },
    { key: 3, text: 'Choice 3', value: 3 },
    { key: 4, text: 'Choice 4', value: 4 },
    { key: 5, text: 'Choice 5', value: 5 },
    { key: 6, text: 'Choice 6', value: 6 },
]


class Example extends Component {

    state = {
        dropval: []
    }

    onDropChange = (e, { value }) => {
        this.setState(
            (prevState) => { return { ...prevState, dropval: value } },
            // () => console.log(this.state)
        )
    }

    render() {
        return (
            <div>
                <Dropdown
                    search
                    multiple
                    selection
                    clearable
                    closeOnSelectionChange={false}
                    options={options}
                    className='selectDropdown'
                    onChange={this.onDropChange}
                    value={this.state.dropval}
                    style={{ width: 300 }}
                />
            </div>
        );
    }
}

export default Example;

Answer 2

我想出了解决这个问题的方法。我不确定这是否是最好的方法，但它似乎工作正常。

    const dropdownButtons = () => {
        return (
            <>
                <div className='dropdown-saveButton'>
                    <Button
                        positive
                        size='mini'
                        onClick={() => {
                            saveValues();
                        }}
                    >
                        Save
                    </Button>
                    <Button size='mini' onClick={clearDropdown}>
                        Clear
                    </Button>
                </div>
                <Divider inverted />
            </>
        );
    };

const clearDropdown = e => {
        var element = dropdownRef.current.querySelector('[aria-selected="true"]');
        if (element) {
            dropdownRef.current.querySelector('.clear')?.click();
        }
    };

                     <Dropdown
                            multiple
                            selection
                            fluid
                            clearable
                            header={dropdownButtons} />

Answer 3

'Save' 和 'Clear' 按钮与 React useState()。在 Reactjs 中你不需要使用 DOM queryselector.

https://codesandbox.io/s/white-leftpad-q6re3?file=/src/Fun.jsx

如何使用按钮清除语义 UI React 中的多选下拉列表？

How to clear Multiselect Dropdown in Semantic UI React using a button?

javascript

reactjs

semantic-ui

semantic-ui-react