首頁猿問反應材料 ui 自動完成元素焦點...

反應材料 ui 自動完成元素焦點 onclick

JavaScript

蝴蝶刀刀 2022-06-16 16:24:26

我有一個 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" /> )}/>;我希望這個元素在我單擊按鈕時獲得焦點。我嘗試使用此處描述的引用如何以編程方式對焦點輸入做出反應它適用于其他元素，但不適用于自動完成

查看完整描述

2 回答

PIPIONE

TA貢獻1829條經驗獲得超9個贊

您應該保存對TextField組件的引用，并在單擊另一個元素時使用此引用來聚焦（一旦觸發了某個事件）。

let inputRef;

<Autocomplete

...

renderInput={params => (

<TextField

inputRef={input => {

inputRef = input;

}}

)}

<button

onClick={() => {

inputRef.focus();

}}

這是一個工作示例的鏈接： https ://codesandbox.io/s/young-shadow-8typb

您可以使用openOnFocus自動完成的屬性來決定是只想專注于輸入還是希望自動完成的下拉菜單打開。

反對回復 2022-06-16

陪伴而非守候

TA貢獻1757條經驗獲得超8個贊

根據材料 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}

<Autocomplete

.....

renderInput={(params) => {

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

return <InputBase

{...params.InputProps}

{...rest}

name="query"

value={query}

onChange={handleSearch}

autoFocus

}}

</DialogActions>

</Dialogue>

干杯?。?！

反對回復 2022-06-16

2 回答
0 關注
164 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

反應材料 ui 自動完成元素焦點 onclick

反應材料 ui 自動完成元素焦點 onclick

2 回答

添加回答