У меня есть Semantic UI React Multiselect Dropdown внутри функционального компонента React, и я хочу иметь кнопки внутри меню как таковые (все еще нужно их центрировать...)
Как очистить выбранные значения с помощью кнопки «Очистить»? Я могу очистить выделение с помощью значка «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.info('I want to reset the multi select dropdown')}>
Clear
</Button>
<Divider />
</div>
);
};
🤔 А знаете ли вы, что...
JavaScript может выполняться как на стороне клиента (в браузере), так и на стороне сервера (с использованием Node.js).
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.info(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;
Я понял, как решить эту проблему. Я не уверен, что это лучший способ, но, похоже, он работает прилично.
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} />
Кнопки «Сохранить» и «Очистить» с React useState(). В Reactjs вам не нужно использовать селектор запросов DOM.
https://codesandbox.io/s/white-leftpad-q6re3?file=/src/Fun.jsx