రియాక్ట్ సెలెక్ట్‌తో అందమైన డ్రాప్‌డౌన్‌లను సృష్టించండి

మీలాంటి పాఠకులు MUOకి మద్దతు ఇవ్వడానికి సహాయం చేస్తారు. మీరు మా సైట్‌లోని లింక్‌లను ఉపయోగించి కొనుగోలు చేసినప్పుడు, మేము అనుబంధ కమీషన్‌ను సంపాదించవచ్చు. ఇంకా చదవండి.

ఎంచుకున్న ఇన్‌పుట్ అనేది చాలా స్థలాన్ని తీసుకోకుండా అనేక ఎంపికల నుండి విలువను ఎంచుకోవడానికి మిమ్మల్ని అనుమతించే ఉపయోగకరమైన వెబ్ యాప్ భాగం. కానీ డిఫాల్ట్ స్టైలింగ్ నిస్తేజంగా ఉంటుంది మరియు మీ మిగిలిన డిజైన్‌తో క్లాష్ అవుతుంది.

రోజు MUO వీడియో కంటెంట్‌తో కొనసాగడానికి స్క్రోల్ చేయండి

డ్రాప్‌డౌన్ ఇన్‌పుట్‌ల రూపాన్ని మరియు కార్యాచరణను మెరుగుపరచడానికి రియాక్ట్ సెలెక్ట్ అనువైన మరియు అనుకూలీకరించదగిన పరిష్కారాన్ని అందిస్తుంది.

---

---

రియాక్ట్ సెలెక్ట్‌ని ఇన్‌స్టాల్ చేస్తోంది

ఇతర లైబ్రరీలు లేదా సాంకేతికతలతో రియాక్ట్‌ని సమగ్రపరచడం , రియాక్ట్ సెలెక్ట్, రియాక్ట్ రిడక్స్ మరియు మరెన్నో వంటివి అభివృద్ధి ప్రక్రియను సులభతరం చేయగలవు.

యూట్యూబ్‌లో నా సబ్‌స్క్రైబర్‌లను నేను ఎలా చూడగలను

రియాక్ట్ సెలెక్ట్‌తో ప్రారంభించడానికి, మీరు దీన్ని మీ ప్రాజెక్ట్‌లో ఇన్‌స్టాల్ చేయాలి. కు npm ఉపయోగించి దీన్ని చేయండి , మీ ప్రాజెక్ట్ డైరెక్టరీలో ఈ టెర్మినల్ ఆదేశాన్ని అమలు చేయండి:

 npm i --save react-select 

ఇది మీ రియాక్ట్ ప్రాజెక్ట్‌లో లైబ్రరీని ఇన్‌స్టాల్ చేస్తుంది మరియు సెటప్ చేస్తుంది, కాబట్టి మీరు దీన్ని ఉపయోగించడం ప్రారంభించవచ్చు.

రియాక్ట్ సెలెక్ట్‌తో సెలెక్ట్ ఇన్‌పుట్‌లను సృష్టిస్తోంది

ఇప్పుడు మీరు లైబ్రరీని సెటప్ చేసారు, మీరు ఎంచుకున్న ఇన్‌పుట్‌లను సృష్టించడానికి దాన్ని ఉపయోగించవచ్చు. దీన్ని చేయడానికి, మీరు ఉపయోగిస్తారు ఎంచుకోండి భాగం. ఇది వినియోగదారులను జాబితా నుండి ఎంపికలను ఎంచుకోవడానికి అనుమతించే అత్యంత అనుకూలీకరించదగిన భాగం.

సెలెక్ట్ కాంపోనెంట్‌ను ఎలా ఉపయోగించాలో ఇక్కడ ఒక ఉదాహరణ ఉంది:

---

---

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} /> 
    </div> 
  ) 
} 
 
export default App 

ఈ ఉదాహరణ దిగుమతి చేయడం ద్వారా ప్రారంభమవుతుంది ఎంచుకోండి నుండి భాగం ' ప్రతిస్పందించు-ఎంచుకోండి ”. ఇది ఒక నిర్వచిస్తుంది ఎంపికలు మూడు వస్తువులతో కూడిన శ్రేణి, ఒక్కొక్కటి a విలువ మరియు ఎ లేబుల్ ఆస్తి. మీరు సమర్పించినప్పుడు ఫారమ్ బ్యాకెండ్‌కు పంపే విలువను విలువ ప్రాపర్టీ సూచిస్తుంది. లేబుల్ ప్రాపర్టీ అనేది డ్రాప్‌డౌన్‌లో సెలెక్ట్ కాంపోనెంట్ ప్రదర్శించే వచనం.

మీరు సెలెక్ట్ కాంపోనెంట్‌ను రెండర్ చేసినప్పుడు, ఎంపికల శ్రేణిని ఉపయోగించి దానికి పాస్ చేయండి ఎంపికలు ఆసరా

---

---

ఈ కోడ్ బ్లాక్‌తో, రియాక్ట్ సెలెక్ట్ లైబ్రరీ ఇలా డ్రాప్‌డౌన్‌ను రూపొందిస్తుంది:

ఎంపిక ఇన్‌పుట్‌లను అనుకూలీకరించడం

రియాక్ట్ సెలెక్ట్ ఎంచుకున్న ఇన్‌పుట్‌లను అనుకూలీకరించడానికి వివిధ మార్గాలను అందిస్తుంది. మీరు CSS తరగతులను ఉపయోగించవచ్చు లేదా మీ ప్రాధాన్యతల ప్రకారం ఎంచుకున్న ఇన్‌పుట్‌లకు నేరుగా ఇన్‌లైన్ శైలులను వర్తింపజేయవచ్చు.

CSS తరగతులతో అనుకూలీకరించడం

రియాక్ట్ సెలెక్ట్ లైబ్రరీ అందిస్తుంది a తరగతి పేరు కోసం ఆసరా ఎంచుకోండి భాగం. ఈ క్లాస్ నేమ్ ప్రాప్ ఉపయోగించండి అనుకూల క్యాస్కేడింగ్ స్టైల్ షీట్ (CSS) వర్తింపజేయడానికి మీ ఎంపిక భాగాలకు శైలులు.

ఉదాహరణకి:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} className='select'/> 
    </div> 
  ) 
} 
 
export default App 

పైన ఉన్న కోడ్ బ్లాక్ మునుపటి మాదిరిగానే ఉంటుంది, కానీ ఇది ఉపయోగిస్తుంది తరగతి పేరు అనుకూల CSS తరగతిని వర్తింపజేయడానికి ఆసరా ఎంచుకోండి భాగం. క్లాస్‌నేమ్ ప్రాప్‌లో పేరును అందించండి మరియు మీరు కాంపోనెంట్‌కు CSS స్టైల్‌లను వర్తింపజేయడానికి దాన్ని ఉపయోగించవచ్చు:

 .select { 
  color: #333333; 
  font-family: cursive; 
  inline-size: 30%; 
  font-size: 11px; 
} 

శైలులను నిర్వచించిన తర్వాత, మీరు ఎంచుకున్న ఇన్‌పుట్ ఇలా కనిపిస్తుంది:

ఐక్లౌడ్ నన్ను సైన్ ఇన్ చేయడానికి అనుమతించదు

ఇన్‌లైన్ స్టైల్స్‌తో అనుకూలీకరించడం

మీరు పాస్ చేసే వస్తువులో ఇన్‌లైన్ స్టైల్‌లను కూడా నిర్వచించవచ్చు శైలులు యొక్క ఆసరా ఎంచుకోండి భాగం. ఇది వ్యక్తిగత అంశాల శైలిపై మీకు మరింత నియంత్రణను ఇస్తుంది.

ఇక్కడ ఒక ఉదాహరణ:

29A3972DB9449D50EDabad5ECCB1A59D09E30789

ఆసరా వస్తువు, కస్టమ్ స్టైల్స్ , సెలెక్ట్ కాంపోనెంట్స్ కోసం స్టైల్ ప్రాపర్టీలను కలిగి ఉంది నియంత్రణ , ఎంపిక , మరియు మెను భాగాలు. ఈ లక్షణాలు రెండు వాదనలను తీసుకునే విధులు: బేస్ స్టైల్స్ మరియు రాష్ట్రం .

బేస్‌స్టైల్స్ పరామితి రియాక్ట్ సెలెక్ట్ ద్వారా అందించబడిన డిఫాల్ట్ స్టైల్‌లను సూచిస్తుంది, అయితే స్టేట్ పరామితి మూలకం యొక్క ప్రస్తుత స్థితిని సూచిస్తుంది. ఈ ఉదాహరణలో, ఫంక్షన్‌లు స్ప్రెడ్ ఆపరేటర్‌ని ఉపయోగించి బేస్‌స్టైల్‌లను కాంపోనెంట్‌లోని ప్రతి భాగానికి అదనపు స్టైల్స్‌తో కలపడానికి ఉపయోగిస్తాయి.

ఈ శైలులను వర్తింపజేసిన తర్వాత, మీరు ఎంచుకున్న ఇన్‌పుట్ ఇలా ఉండాలి:

ఎంపిక ఇన్‌పుట్‌లకు కార్యాచరణను జోడిస్తోంది

ఎంచుకున్న ఇన్‌పుట్‌ల కార్యాచరణను మెరుగుపరచడానికి రియాక్ట్ సెలెక్ట్ అనేక లక్షణాలను అందిస్తుంది. మీరు బహుళ-ఎంపిక మరియు శోధన కార్యాచరణను ప్రారంభించవచ్చు మరియు అనుకూల డ్రాప్‌డౌన్ భాగాలను కూడా సృష్టించవచ్చు.

బహుళ-ఎంపిక కార్యాచరణ

మీ డ్రాప్‌డౌన్‌లలో బహుళ-ఎంపిక ఫంక్షనాలిటీని ప్రారంభించడానికి, పాస్ చేయండి బహుళ సెలెక్ట్ కాంపోనెంట్‌కు ప్రాప్ చేయండి. ఇది డ్రాప్‌డౌన్ మెను నుండి బహుళ ఎంపికలను ఎంచుకోవడానికి వినియోగదారులను అనుమతిస్తుంది.

ఉదాహరణకి:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
    { value: "grapes", label: "Grapes" }, 
    { value: "orange", label: "Orange" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} isMulti /> 
    </div> 
  ) 
} 
 
export default App 

ఈ ఉదాహరణ ఎలా ఉపయోగించాలో చూపిస్తుంది బహుళ మీరు ఎంచుకున్న ఇన్‌పుట్‌లకు బహుళ-ఎంపిక కార్యాచరణను జోడించడానికి ప్రాప్ చేయండి.

దురదృష్టవశాత్తు గూగుల్ ప్లే స్టోర్ ఆగిపోయింది

శోధన కార్యాచరణ

రియాక్ట్ సెలెక్ట్ లైబ్రరీ ఎంపికలను సులభంగా ఫిల్టర్ చేయడానికి అంతర్నిర్మిత శోధన కార్యాచరణను అందిస్తుంది. డిఫాల్ట్‌గా, మీరు డ్రాప్‌డౌన్‌ను తెరిచినప్పుడు సెలెక్ట్ కాంపోనెంట్ శోధన ఇన్‌పుట్‌ను ప్రదర్శిస్తుంది. అందుబాటులో ఉన్న ఎంపికలను ఫిల్టర్ చేయడానికి వినియోగదారులు శోధన ఇన్‌పుట్‌లో టైప్ చేయవచ్చు.

శోధన కార్యాచరణను ప్రారంభించడానికి, పాస్ చేయండి శోధించదగినది ఆసరా ఎంచుకోండి భాగం. వంటిది బహుళ prop, isSearchable బూలియన్ విలువను అంగీకరిస్తుంది.

శోధన కార్యాచరణను ప్రారంభించడానికి isSearchable ప్రాప్‌ను ఎలా ఉపయోగించాలో ఇక్కడ ఒక ఉదాహరణ ఉంది:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "apricot", label: "Apricot" }, 
    { value: "mango", label: "Mango" }, 
    { value: "mangosteens", label: "Mangosteens" }, 
    { value: "avocado", label: "Avocado" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} isSearchable /> 
    </div> 
  ) 
} 
 
export default App 

ఎగువ కోడ్ బ్లాక్‌ని రెండరింగ్ చేయడం వలన సెర్చ్ ఫంక్షనాలిటీతో ఎంచుకున్న ఇన్‌పుట్ ప్రదర్శించబడుతుంది. ఇది ఇలా కనిపిస్తుంది మరియు పని చేస్తుంది:

అనుకూల డ్రాప్‌డౌన్ భాగాలను సృష్టించండి

కాంపోనెంట్స్ ప్రాప్‌ని ఉపయోగించి కస్టమ్ డ్రాప్‌డౌన్ కాంపోనెంట్‌లను సృష్టించడానికి రియాక్ట్ సెలెక్ట్ మిమ్మల్ని అనుమతిస్తుంది. మీరు రియాక్ట్ సెలెక్ట్ ద్వారా అందించబడిన డిఫాల్ట్ భాగాలను భర్తీ చేయవచ్చు మరియు మీ అభిరుచికి అనుగుణంగా డ్రాప్‌డౌన్ యొక్క రూపాన్ని మరియు ప్రవర్తనను అనుకూలీకరించవచ్చు.

ఉదాహరణకి:

 import React from "react" 
import Select, { components } from "react-select" 
 
function App() { 
  const CustomOption = (obj) => ( 
    <div {...obj.innerProps}> 
      <span>{obj.label}</span> 
      <span style={{ marginInlineStart: "0.2rem" }}>Fruit</span> 
    </div> 
  ) 
 
  const CustomDropdownIndicator = (props) => ( 
    <components.DropdownIndicator {...props}> 
      <span>&darr;</span> 
    </components.DropdownIndicator> 
  ) 
 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  const customComponents = { 
    Option: CustomOption, 
    DropdownIndicator: CustomDropdownIndicator, 
  } 
 
  return <Select options={options} components={customComponents} /> 
} 
 
export default App 

ఈ కోడ్ బ్లాక్‌ని ఉపయోగించి ఎంచుకున్న ఇన్‌పుట్ కోసం అనుకూల భాగాలను ఎలా సృష్టించాలో చూపిస్తుంది భాగాలు యొక్క ఆసరా ఎంచుకోండి భాగం. ఇది దిగుమతి చేస్తుంది భాగాలు మీరు ఎంచుకున్న ఇన్‌పుట్‌లలోని వివిధ మూలకాల రూపాన్ని మరియు ప్రవర్తనను అనుకూలీకరించడానికి మీరు ఉపయోగించే ముందే నిర్వచించబడిన భాగాల సమాహారమైన ఆబ్జెక్ట్.

కోడ్ రెండు ఫంక్షనల్ భాగాలను నిర్వచిస్తుంది: కస్టమ్ ఆప్షన్ మరియు కస్టమ్‌డ్రాప్‌డౌన్ సూచిక . CustomOption భాగం ఒక వస్తువును పారామీటర్‌గా తీసుకుంటుంది. ఈ వస్తువు రియాక్ట్ సెలెక్ట్ అందించే వివిధ లక్షణాలను కలిగి ఉంది innerProps మరియు లేబుల్ .

CustomDropdownIndicator భాగం తీసుకుంటుంది ఆధారాలు ఒక పరామితిగా. ఈ భాగం క్రిందికి బాణం గుర్తుతో అనుకూల డ్రాప్‌డౌన్ సూచికను అందిస్తుంది. కోడ్ సృష్టిస్తుంది a అనుకూల భాగాలు కస్టమ్‌ఆప్షన్ మరియు కస్టమ్‌డ్రాప్‌డౌన్‌ఇండికేటర్ భాగాలను సంబంధిత వాటికి మ్యాప్ చేసే ఆబ్జెక్ట్ ఎంపిక మరియు డ్రాప్‌డౌన్ సూచిక కీలు.

చివరగా, ఈ కోడ్ కస్టమ్ కాంపోనెంట్స్ ఆబ్జెక్ట్‌ని సెలెక్ట్ కాంపోనెంట్ యొక్క కాంపోనెంట్స్ ప్రాప్‌కి పంపుతుంది. ఇది కస్టమ్ కాంపోనెంట్‌లతో ఎంపిక చేసిన ఇన్‌పుట్‌ను రెండర్ చేస్తుంది, ఇలా కనిపిస్తుంది:

ప్రామాణిక భాగాలు మరింత శక్తివంతమైన మరియు ఆకర్షణీయంగా ఉంటాయి

రియాక్ట్ సెలెక్ట్ అనేది శక్తివంతమైన లైబ్రరీ, ఇది రియాక్ట్‌లో అందమైన మరియు స్టైలిష్ ఎంపిక ఇన్‌పుట్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. మీరు ఎంచుకున్న ఇన్‌పుట్‌లను అనుకూలీకరించవచ్చు, వాటికి కార్యాచరణను జోడించవచ్చు మరియు అనుకూల డ్రాప్‌డౌన్ భాగాలను సృష్టించవచ్చు. ఈ లైబ్రరీని సద్వినియోగం చేసుకుని, మీరు మీ రియాక్ట్ యాప్‌ల రూపాన్ని మరియు వినియోగదారు అనుభవాన్ని మెరుగుపరచుకోవచ్చు.