反应材料 ui 自动完成元素焦点 onclick

Question

我有一个 material-ui 自动完成元素<Autocomplete  id="combo-box-demo"  autoHighlight  openOnFocus  autoComplete  options={this.state.products}  getOptionLabel={option => option.productName}  style={{ width: 300 }}  onChange={this.selectProduct}  renderInput={params => (    <TextField {...params} label="Select Product Name" variant="outlined" />  )}/>;我希望这个元素在我单击按钮时获得焦点。我尝试使用此处描述的引用如何以编程方式对焦点输入做出反应它适用于其他元素，但不适用于自动完成

Answer 1

您应该保存对TextField组件的引用，并在单击另一个元素时使用此引用来聚焦（一旦触发了某个事件）。

let inputRef;

<Autocomplete

  ...

  renderInput={params => (

    <TextField

      inputRef={input => {

        inputRef = input;

      }}

    />

  )}

/>

<button

  onClick={() => {

    inputRef.focus();

  }}

这是一个工作示例的链接： https ://codesandbox.io/s/young-shadow-8typb

您可以使用openOnFocus自动完成的属性来决定是只想专注于输入还是希望自动完成的下拉菜单打开。

Answer 2

根据材料 ui 先前版本 4 或当前版本 5，您可以使用 autoFocus 道具简单地聚焦自动完成输入元素，如果 autoFocus 设置为 true，则输入元素将聚焦在自动完成组件的每个首次安装上。

const [query, setQuery] = useState('');

<Autocomplete

.....

 renderInput={(params) => {

  const { InputLabelProps, InputProps, ...rest } = params;

  return <InputBase

    {...params.InputProps}

                    {...rest} 

                     name="query"

                      value={query}  

                      onChange={handleSearch}

                      autoFocus

   />

}}

/>

// 这只是一个示例，您可以根据自己的意愿处理以下函数

function handleOnSearch({ currentTarget = {} }) {

    const { value } = currentTarget;

    setQuery(value);

  }

如果您想在单击按钮后打开自动完成输入：-

//button to be clicked to open autocomplete input

const clickButton=()=>{

setOpen(true)

}

const handleClose =()=>{

setOpen(false)

}

<Dialogue

close={handleClose}

open={open}

>

<DialogActions>

 <Autocomplete

    .....

     renderInput={(params) => {

      const { InputLabelProps, InputProps, ...rest } = params;

      return <InputBase

        {...params.InputProps}

                        {...rest} 

                         name="query"

                          value={query}  

                          onChange={handleSearch}

                          autoFocus

    

       />

    

    }}

    

    />

</DialogActions>

</Dialogue>

干杯！！！