AMcoder - javascript, python, java, html, php, sql

Մրջյունների ձևավորում - Ինչպե՞ս կարող եմ ավտոմատ փակել ընտրությունը (պիտակներ կամ բազմակի ռեժիմ) բացվող յուրաքանչյուր ընտրությունից հետո:

Ես օգտագործում եմ ant.design ընտրված բաղադրիչը («պիտակներ» կամ «բազմակի» ռեժիմ) էջի վրա, ես ուզում եմ, որ բացվող ցանկը ավտոմատ կերպով փակվի յուրաքանչյուր ընտրությունից հետո: Այժմ այն ​​բաց է մնում, և ես պետք է սեղմեմ էջի այլ վայրերի վրա՝ բացվող ցուցակը փակելու համար:

import { Select } from 'antd';

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select mode="multiple" placeholder="Select Countries" size="large" onChange={handleChange}>
    <Option value="country1">Country1</Option>
    <Option value="country2">Country2</Option>
    <Option value="country3">Country3</Option>
    <Option value="country4">Country4</Option>
    <Option value="country5">Country5</Option>
    <Option value="country6">Country6</Option>
</Select>,
  mountNode,
);

  • Եթե ​​դուք ստեղծեք կենդանի օրինակ այստեղ՝ codesandbox.io, ես կփորձեմ ձեզ ավելի շատ օգնել... 28.05.2019

Պատասխանները:


1

Պարզապես փոխեք առաջին «Ընտրել» բաղադրիչը հետևյալով.

<Select 
      mode="multiple" 
      placeholder="Select Countries"
      size="large" 
      ref={(select) => this.countrySelect = select}
      onChange={()=>{ 
          this.countrySelect.blur()
      }}>
    <Option value="country1">Country1</Option>
    <Option value="country2">Country2</Option>
    <Option value="country3">Country3</Option>
    <Option value="country4">Country4</Option>
    <Option value="country5">Country5</Option>
    <Option value="country6">Country6</Option>
</Select>
06.06.2019

2

Փաստաթղթերից.

import { Select } from 'antd';

const Option = Select.Option;

function handleChange( value ) {
  console.log( `selected ${value}` );
}

<Select defaultValue="lucy" style={ { width: 120 } } onChange={ handleChange }>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="disabled" disabled>Disabled</Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={ { width: 120 } } disabled>
  <Option value="lucy">Lucy</Option>
</Select>
<Select defaultValue="lucy" style={ { width: 120 } } loading>
    <Option value="lucy">Lucy</Option>
</Select>

Օգտագործեք իր սեփական <Option>

Լրացուցիչ տեղեկություններ՝ https://ant.design/components/select/

26.05.2019
  • Ես օգտագործում եմ այն ​​ճիշտ, միայն ընտրված բաղադրիչում, այն լավ է աշխատում, յուրաքանչյուր ընտրության բացվող պատուհանը փակելուց հետո, բայց (ռեժիմ=պիտակներ) բացվող ցանկը մնում է բաց: 28.05.2019
  • @HosseinHajiMali Ծանուցման տարբերակը մեծատառով... Ուշադրություն դարձրեք, որ այն ներմուծվում է const Option = Selected.Option -ում Դա մի բաղադրիչ է, որը ներկառուցված է ֆունկցիոնալությամբ... Նույնը չէ, ինչ փոքրատառ տարբերակը... 28.05.2019
  • Լավ, դուք փոխել եք այն, և այն դեռ չի աշխատում այնպես, ինչպես սպասվում էր: @HosseinHajiMali 28.05.2019
  • Այո, ես փորձում էի այն կարճացնել, իրականում ես արեցի ճիշտ նույնը, ինչ ant.design օրինակն իմ նախագծում, բայց ես դեռ ունեմ խնդիրը: եթե ստուգեք ant.design օրինակը բազմակի ընտրության բացվող պատուհանում, կարող եք նաև տեսնել խնդիրը, բացվող ցանկը մնում է բաց: 28.05.2019
  • Մտածեք մոդալ և բազմակի ընտրության բացվող տարբերակ, այն բացվում է և որտեղ պետք է սեղմել այն փակելու համար: Այն փակելու համար դատարկ վայրի վրա սեղմելը հարմար չէ օգտագործողի համար, այն պետք է ինքնաբերաբար փակվի յուրաքանչյուր ընտրությունից հետո 28.05.2019
  • @HosseinHajiMali Քանի որ այն ունի ներկառուցված ֆունկցիոնալություն, դուք պետք է մի փոքր փոփոխեք այն, որպեսզի համապատասխանի ձեր օգտագործման գործին... Տես իմ մեկնաբանությունը վերևում... 28.05.2019
  • Նոր նյութեր

    Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
    JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..

    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...

    Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
    Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..

    Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
    Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..

    Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
    Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..

    C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
    C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...

    Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
    Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..