Держите список открытым при выборе элемента
Я хотел бы создать элемент CSS таким образом, чтобы:
- Есть кнопка.
- При нажатии на кнопку открывается список (например, выпадающий список) элементов.
- Мы можем щелкнуть элементы для выбора, и родительский компонент будет систематически информироваться.
- Мы нажимаем на область за пределами списка (например, снова нажимаем кнопку), чтобы закрыть список.
Я сделал обычный выпадающий список со следующим кодом с помощью Dropdown (одна версия и другая предварительная версия ) Fluent UI (codesandbox: https://codesandbox.io/s/inspiring-lovelace-ivln6v ?file=/src/App.js). Это не соответствует 4-му условию выше: выбор элемента будет систематически закрывать раскрывающийся список, тогда как я ожидаю, что список все еще открыт, и щелчок по области за пределами списка (например, повторное нажатие на кнопку) закрывает список.
Обратите внимание, что это поведение по умолчанию контролируемого раскрывающегося списка с множественным выбором, где нам нужно щелкнуть область за пределами раскрывающегося списка (например, снова нажать кнопку), чтобы закрыть раскрывающийся список. Так что это не безосновательная потребность.
Кто-нибудь знает, как сделать такой элемент CSS (вероятно, настроив существующие элементы управления)? Я открыт для списка элементов управления, таких как Dropdown, Select и Combobox библиотек, таких как пользовательский интерфейс Fabric, пользовательский интерфейс Fluent, пользовательский интерфейс материалов.
import React from "react";
import { Dropdown } from "@fluentui/react/lib/Dropdown";
import { initializeIcons } from "@fluentui/react/lib/Icons";
initializeIcons();
const numberOptions = [8, 9, 10].map((i) => ({
key: i,
text: "Number: " + i.toString()
}));
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { number: 8 };
}
onnumberChange = (_ev, option) => {
if (typeof option.key === "number") {
this.setState({ number: option.key });
}
};
render() {
return (
<div>
{`Number: ${this.state.number}`}
<br />
<br />
<Dropdown
options = {numberOptions}
defaultSelectedKey = {this.state.number}
onChange = {this.onnumberChange}
/>
</div>
);
}
}
Ответы 1
Обходной путь — использовать open, onOpenChange, onOpenSelect или предварительную версию Dropdown.
CodeSandbox: https://codesandbox.io/s/inspiring-almeida-3lgtcy?file=/src/App.js
import React from "react";
import { Dropdown, Option } from "@fluentui/react-components/unstable";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { initializeIcons } from "@fluentui/react/lib/Icons";
initializeIcons();
const numberOptions = ["8", "9", "10"];
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { number: "9", op: false };
}
render() {
return (
<FluentProvider theme = {webLightTheme}>
<div>
{`Number: ${this.state.number}`}
<br />
<br />
<Dropdown
open = {this.state.op}
onOpenChange = {(e, data) =>
this.setState(
{ op: data.open },
console.info("onOpenChange", this.state.op ? "closed" : "open")
)
}
onOptionSelect = {(e, data) =>
this.setState({ op: true, number: data.optionText })
}
defaultSelectedOptions = {["9"]}
>
{numberOptions.map((option) => (
<Option key = {option}>{option}</Option>
))}
</Dropdown>
</div>
</FluentProvider>
);
}
}