素材用户界面输入库自动对焦不起作用

如何解决素材用户界面输入库自动对焦不起作用

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

<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>

解决方法

您可以尝试使用 searchInputRef.current.focus（）;

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