第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

反應(yīng)材料 ui 自動(dòng)完成元素焦點(diǎn) onclick

反應(yīng)材料 ui 自動(dòng)完成元素焦點(diǎn) onclick

蝴蝶刀刀 2022-06-16 16:24:26
我有一個(gè) material-ui 自動(dòng)完成元素<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" />  )}/>;我希望這個(gè)元素在我單擊按鈕時(shí)獲得焦點(diǎn)。我嘗試使用此處描述的引用如何以編程方式對(duì)焦點(diǎn)輸入做出反應(yīng)它適用于其他元素，但不適用于自動(dòng)完成
查看完整描述

2 回答

?
PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

您應(yīng)該保存對(duì)TextField組件的引用，并在單擊另一個(gè)元素時(shí)使用此引用來聚焦（一旦觸發(fā)了某個(gè)事件）。


let inputRef;


<Autocomplete

  ...

  renderInput={params => (

    <TextField

      inputRef={input => {

        inputRef = input;

      }}

    />

  )}

/>

<button

  onClick={() => {

    inputRef.focus();

  }}

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


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


查看完整回答
反對(duì) 回復(fù) 2022-06-16
?
陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

根據(jù)材料 ui 先前版本 4 或當(dāng)前版本 5，您可以使用 autoFocus 道具簡單地聚焦自動(dòng)完成輸入元素，如果 autoFocus 設(shè)置為 true，則輸入元素將聚焦在自動(dòng)完成組件的每個(gè)首次安裝上。


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


<Autocomplete

.....

 renderInput={(params) => {

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

  return <InputBase

    {...params.InputProps}

                    {...rest} 

                     name="query"

                      value={query}  

                      onChange={handleSearch}

                      autoFocus


   />


}}


/>

// 這只是一個(gè)示例，您可以根據(jù)自己的意愿處理以下函數(shù)


function handleOnSearch({ currentTarget = {} }) {

    const { value } = currentTarget;

    setQuery(value);

  }

如果您想在單擊按鈕后打開自動(dòng)完成輸入：-


//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>

干杯！??！


查看完整回答
反對(duì) 回復(fù) 2022-06-16
  • 2 回答
  • 0 關(guān)注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)