选择值后 React Mui 自动完成重置滚动答案

【问题标题】：React Mui Autocomplete resets scroll after selecting values选择值后 React Mui 自动完成重置滚动
【发布时间】：2022-12-25 00:51:27
【问题描述】：

所以我想建立一个mui-自动完成带有附加按钮的组件（全部清除（清除所有值并关闭下拉列表）+应用（设置值并关闭下拉列表））使用列表框组件.

问题：

从列表底部选择选项时，滚动位置重置为顶部

无法以编程方式关闭下拉菜单

这里是列表框组件

        ListboxComponent={(listBoxProps) => {
          return (
            <div>
              <ul {...listBoxProps} />
              <div>
                <button
                  onMouseDown={(event) => {
                    // Disable blur
                    event.preventDefault();
                  }}
                  onClick={() => {
                    // clear values
                    setSelected([]);
                  }}
                >
                  Clear All
                </button>
                <button
                  onMouseDown={(event) => {
                    // Disable blur
                    event.preventDefault();
                  }}
                  onClick={() => {
                    // apply value
                  }}
                >
                  Apply
                </button>
              </div>
            </div>
          );

选项呈现如下：

        renderOption={(optionProps, option, optionState) => {
          return (
            <li {...optionProps}>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                checked={optionState.selected}
              />
              {option}
            </li>
          );
        }}

所以我使用状态来跟踪保存所选值：

 const [selectedResult, setSelected] = useState([]);

And when the option is selected - the state is updated

        onChange={(event, selectedOptions) => {
          setSelected(selectedOptions);
        }}

但是当状态改变时，组件被重新渲染并且滚动被重置。似乎我也不能使用局部变量来存储中间结果，因为状态不会更新，复选框也不会更新。

StackBlitz link

我能做些什么来实现这一目标？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这是解决方案结帐此链接

https://codesandbox.io/s/react-mui-autocomplete-bh2g03?file=/demo.tsx

【讨论】：