如何将焦点设置在FormControl上 - 选择？ （反应）

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();但是反应告诉我，focus（）不是一个函数。例如，使用按钮，ref正在工作。

PS：我不需要autoFocus

谢谢

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 prop，这将把下划线输入“附加”选择。 Code example和Docs.

Answer 2

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

要访问，请使用

this.refs.selectRef.focus()

这是一个参考github link