选择值时反应材质 UI 关闭 - 多选

Question

我正在使用 React Material UI 来构建我的组件。我正在使用反应多选来从用户那里获取多个值。

<FormControl className={clsx(classes.formControl, classes.noLabel)}>
        <Select
          multiple
          value={personName}
          onChange={handleChange}
          onClick={(e) => {
            e.stopPropagation();
            e.preventDefault();
          }}
          input={<Input />}
          renderValue={(selected) => {
            if (selected.length === 0) {
              return <em>Placeholder</em>;
            }

            return selected.join(", ");
          }}
          MenuProps={MenuProps}
          inputProps={{ "aria-label": "Without label" }}
        >
          <MenuItem disabled value="">
            <em>Placeholder</em>
          </MenuItem>
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>

工作正常。但当用户选择该值时，我需要关闭下拉列表。但现在只有当模糊事件触发时才会关闭。

当用户选择任何值时是否有任何选项可以关闭下拉列表？

提前致谢

Answer 1

也许你可以通过使用 useRef 钩子来解决这个问题。 添加对选择的引用，在更改处理程序中，您可以尝试使用 ref.current.close() 关闭它。

import React , {useRef} from 'react';
const ref = useRef()
<FormControl className={clsx(classes.formControl, classes.noLabel)}>
        <Select
          multiple
          value={personName}
          onChange={handleChange}
          ref={ref}
          onClick={(e) => {
            e.stopPropagation();
            e.preventDefault();
          }}
          input={<Input />}
          renderValue={(selected) => {
            if (selected.length === 0) {
              return <em>Placeholder</em>;
            }

            return selected.join(", ");
          }}
          MenuProps={MenuProps}
          inputProps={{ "aria-label": "Without label" }}
        >
          <MenuItem disabled value="">
            <em>Placeholder</em>
          </MenuItem>
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      
      const handleChange = (event) =>{
      ....
      ref.current.close();
      }