reactjs - 如何将焦点设置在 FormControl - Select 上？ ( react )

Question

我有material-ui - select并希望以编程方式关注此元素。

<FormControl 
className="select100">
<Select
    ref={(formControll) => { this.formControll = formControll; }}                                 
    native
    value={value}
    input={<Input id="integer" />}
>
    {possibleOptions.map((item, key) => {
      return (<option value={item} key={key}>{item}</option>)
    })}
</Select>

我尝试使用ref并编写this.formControll.focus();但 react 告诉我 focus() 不是一个函数。例如，使用按钮，引用就可以工作。

PS:我不需要自动对焦

谢谢

Answer 1

您可以将 Input 传递到 Select 的 autoFocus 属性中，这将应用于 Select。

<Select
  native
  value={value}
  input={<Input id="integer" autoFocus={true} />}
>
  {possibleOptions.map((item, key) => {
    return (<option value={item} key={key}>{item}</option>)
  })}
</Select>

编辑
当我发布答案时，我错过了您不需要autoFocus的部分。

如果您在 Select 中使用输入，则可以使用 inputRef 属性，这会将下划线输入集中“附加”到选择。
Code example和 Docs.