首页 文章

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

提问于
浏览 次
3

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

谢谢

reactjs material-ui

2 回答

  • 3

    您可以在 Select autoFocus 道具内传递 Input ，这将适用于 Select .

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

    Edit
    当我发布答案时，我错过了你不需要的部分 autoFocus .

    如果您在 Select 中使用输入，则可以使用 inputRef prop，这会将下划线输入"attached"聚焦到选择 .
    Code example和Docs.

    回复于
  • 1
    <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

    回复于

相关问题