材质 ui 输入基础自动对焦不起作用

Question

我正在使用材质 ui 选择框。在选择框内我有一个输入库，用于过滤选择框选项。问题是当我选择一个选项并在输入库中输入时，它失去了焦点。问题不会发生选择框时没有值.AND自动对焦不适用于输入基础和输入道具

<Select
          ref={ref}
          input={<BootstrapInput />}
          labelId="demo-mutiple-chip-label"
          id="demo-mutiple-chip"
          multiple
          value={value}
          onChange={onChange}
          renderValue={selected => (
            <div className={classes.chips}>
              {selected.map(id => (
                <Chip
                  key={id}
                  label={options[id]}
                  className={classes.chip}
                  onDelete={() => {
                    onDelete(id);
                  }}
                  onMouseDown={event => {
                    event.stopPropagation();
                  }}
                  classes={{
                    deleteIcon: classes.deleteIcon,
                    root: classes.chip,
                    label: classes.labelChip,
                  }}
                />
              ))}
            </div>
          )}
          classes={{
            icon: classes.arrowIcon,
            selectMenu: classes.selectMenu,
          }}
          MenuProps={{ classes: { paper: classes.paper } }}
        >
          <MenuItem
            onKeyDown={e => {
              e.stopPropagation();
            }}
            // onClick={e => e.stopPropagation()}
            // onChange={e => e.stopPropagation()}
          >
            <InputBase
              value={searchText}
              onChange={e => setSearchText(e.target.value)}
              placeholder="جستجو کنید"
              classes={{ root: classes.searchInput }}
              autoFocus
              inputRef={searchInputRef}
              inputProps={{ autoFocus: true }}
              onKeyDown={e => {
                e.stopPropagation();
              }}
            />
            {Object.keys(filteredOptions).length === 0 && (
              <StyledButton
                onClick={() => {
                  setSearchText('');
                  addButtonClickHandler(searchInputRef.current.value);
                }}
              >
                <Add />
              </StyledButton>
            )}
          </MenuItem>
          {Object.keys(filteredOptions).map(id => (
            <MenuItem key={id} value={id} onKeyDown={e => e.stopPropagation()}>
              <Checkbox checked={checked(id)} key={id} />
              {filteredOptions[id]}
            </MenuItem>
          ))}
        </Select>

Answer 1

您可以尝试使用 searchInputRef.current.focus();

useEffect(() => {
    searchInputRef.current.focus();
  }, []);