<select>

Built-in browser <select> component, options கொண்ட select box render செய்ய அனுமதிக்கிறது.

<select>
  <option value="someOption">சில option</option>
  <option value="otherOption">மற்ற option</option>
</select>

Reference
- <select>
Usage

Reference

`<select>`

Select box display செய்ய, built-in browser <select> component-ஐ render செய்யவும்.

<select>
  <option value="someOption">சில option</option>
  <option value="otherOption">மற்ற option</option>
</select>

கீழே மேலும் examples பார்க்கவும்.

Props

<select> அனைத்து common element props-ஐ support செய்கிறது.

value prop pass செய்வதன் மூலம் select box-ஐ controlled ஆக்கலாம்:

value: String (அல்லது multiple={true}-க்கு strings array). எந்த option selected என்பதை control செய்கிறது. ஒவ்வொரு value string-மும் <select> உள்ளே nested இருக்கும் ஏதேனும் <option>-ன் value-க்கு match ஆக வேண்டும்.

value pass செய்தால், அந்த passed value-ஐ update செய்யும் onChange handler-யையும் pass செய்ய வேண்டும்.

உங்கள் <select> uncontrolled என்றால், அதற்கு பதிலாக defaultValue prop pass செய்யலாம்:

defaultValue: String (அல்லது multiple={true}-க்கு strings array). Initially selected option-ஐ specify செய்கிறது.

இந்த <select> props uncontrolled மற்றும் controlled select boxes இரண்டுக்கும் relevant:

autoComplete: String. சாத்தியமான autocomplete behaviors-ல் ஒன்றை specify செய்கிறது.
autoFocus: Boolean. true என்றால், mount போது React element-ஐ focus செய்யும்.
children: <select> children ஆக <option>, <optgroup>, மற்றும் <datalist> components-ஐ ஏற்கிறது. இறுதியில் allowed components-ல் ஒன்றை render செய்தால் உங்கள் சொந்த components-யையும் pass செய்யலாம். இறுதியில் <option> tags render செய்யும் உங்கள் சொந்த components pass செய்தால், நீங்கள் render செய்யும் ஒவ்வொரு <option>-க்கும் value இருக்க வேண்டும்.
disabled: Boolean. true என்றால், select box interactive ஆக இருக்காது; dimmed ஆக தோன்றும்.
form: String. இந்த select box சேர்ந்துள்ள <form>-ன் id-ஐ specify செய்கிறது. Omit செய்தால், closest parent form.
multiple: Boolean. true என்றால், browser multiple selection-ஐ அனுமதிக்கும்.
name: String. Form உடன் submit செய்யப்படும் இந்த select box-க்கான name-ஐ specify செய்கிறது.
onChange: Event handler function. Controlled select boxes-க்கு required. User வேறு option pick செய்தவுடன் உடனடியாக fires ஆகும். Browser input event போல behave செய்கிறது.
onChangeCapture: Capture phase-இல் fire ஆகும் onChange version.
onInput: Event handler function. User value மாற்றியவுடன் உடனடியாக fires ஆகும். Historical reasons காரணமாக, React-இல் இதற்கு பதிலாக similarly work செய்யும் onChange பயன்படுத்துவது idiomatic.
onInputCapture: Capture phase-இல் fire ஆகும் onInput version.
onInvalid: Event handler function. Form submit போது input validation fail ஆனால் fires ஆகும். Built-in invalid event-க்கு மாறாக, React onInvalid event bubbles.
onInvalidCapture: Capture phase-இல் fire ஆகும் onInvalid version.
required: Boolean. true என்றால், form submit செய்ய value வழங்கப்பட வேண்டும்.
size: Number. multiple={true} selects-க்கு, initially visible items-ன் preferred number-ஐ specify செய்கிறது.

Caveats

HTML-இல் போல அல்லாமல், <option>-க்கு selected attribute pass செய்வது supported இல்லை. அதற்கு பதிலாக uncontrolled select boxes-க்கு <select defaultValue> மற்றும் controlled select boxes-க்கு <select value> பயன்படுத்தவும்.
Select box value prop பெற்றால், அது controlled ஆக treat செய்யப்படும்.
Select box ஒரே நேரத்தில் controlled மற்றும் uncontrolled ஆக இருக்க முடியாது.
Select box அதன் lifetime-இல் controlled அல்லது uncontrolled இடையே switch செய்ய முடியாது.
ஒவ்வொரு controlled select box-க்கும் அதன் backing value-ஐ synchronously update செய்யும் onChange event handler தேவை.

Usage

Options உடன் select box display செய்தல்

Select box display செய்ய, உள்ளே <option> components list உடன் <select> render செய்யவும். Form உடன் submit செய்ய வேண்டிய data-வை represent செய்ய ஒவ்வொரு <option>-க்கும் value கொடுக்கவும்.

Fork

export default function FruitPicker() {
  return (
    <label>
      ஒரு பழம் தேர்வு செய்யுங்கள்:
      <select name="selectedFruit">
        <option value="apple">ஆப்பிள்</option>
        <option value="banana">வாழைப்பழம்</option>
        <option value="orange">ஆரஞ்சு</option>
      </select>
    </label>
  );
}

Select box-க்கு label வழங்குதல்

பொதுவாக, ஒவ்வொரு <select>-யையும் <label> tag உள்ளே வைப்பீர்கள். இந்த label அந்த select box உடன் associated என்று browser-க்கு இது சொல்கிறது. User label click செய்தால், browser select box-ஐ automatically focus செய்யும். Accessibility-க்கும் இது அவசியம்: user select box-ஐ focus செய்யும்போது screen reader label caption-ஐ announce செய்யும்.

<select>-ஐ <label>-க்குள் nest செய்ய முடியாவிட்டால், <select id> மற்றும் <label htmlFor>-க்கு அதே ID pass செய்து associate செய்யவும். ஒரே component-ன் multiple instances இடையே conflicts தவிர்க்க, அப்படியான ID-ஐ useId மூலம் generate செய்யவும்.

Fork

import { useId } from 'react';

export default function Form() {
  const vegetableSelectId = useId();
  return (
    <>
      <label>
        ஒரு பழம் தேர்வு செய்யுங்கள்:
        <select name="selectedFruit">
          <option value="apple">ஆப்பிள்</option>
          <option value="banana">வாழைப்பழம்</option>
          <option value="orange">ஆரஞ்சு</option>
        </select>
      </label>
      <hr />
      <label htmlFor={vegetableSelectId}>
        ஒரு காய்கறி தேர்வு செய்யுங்கள்:
      </label>
      <select id={vegetableSelectId} name="selectedVegetable">
        <option value="cucumber">வெள்ளரிக்காய்</option>
        <option value="corn">சோளம்</option>
        <option value="tomato">தக்காளி</option>
      </select>
    </>
  );
}

Initially selected option வழங்குதல்

Default ஆக, browser list-இல் உள்ள முதல் <option>-ஐ select செய்யும். வேறு option-ஐ default ஆக select செய்ய, அந்த <option>-ன் value-ஐ <select> element-க்கு defaultValue ஆக pass செய்யவும்.

Fork

export default function FruitPicker() {
  return (
    <label>
      ஒரு பழம் தேர்வு செய்யுங்கள்:
      <select name="selectedFruit" defaultValue="orange">
        <option value="apple">ஆப்பிள்</option>
        <option value="banana">வாழைப்பழம்</option>
        <option value="orange">ஆரஞ்சு</option>
      </select>
    </label>
  );
}

Pitfall

HTML-இல் போல அல்லாமல், தனிப்பட்ட <option>-க்கு selected attribute pass செய்வது supported இல்லை.

Multiple selection enable செய்தல்

User multiple options select செய்ய, <select>-க்கு multiple={true} pass செய்யவும். அந்த case-இல், initially selected options தேர்வு செய்ய defaultValue-யும் specify செய்தால், அது array ஆக இருக்க வேண்டும்.

Fork

export default function FruitPicker() {
  return (
    <label>
      சில பழங்களை தேர்வு செய்யுங்கள்:
      <select
        name="selectedFruit"
        defaultValue={['orange', 'banana']}
        multiple={true}
      >
        <option value="apple">ஆப்பிள்</option>
        <option value="banana">வாழைப்பழம்</option>
        <option value="orange">ஆரஞ்சு</option>
      </select>
    </label>
  );
}

Form submit செய்யும்போது select box value படித்தல்

உங்கள் select box சுற்றி <form> சேர்த்து, உள்ளே <button type="submit"> வைக்கவும். இது உங்கள் <form onSubmit> event handler-ஐ call செய்யும். Default ஆக, browser form data-வை current URL-க்கு அனுப்பி page refresh செய்யும். e.preventDefault() call செய்து அந்த behavior-ஐ override செய்யலாம். new FormData(e.target) மூலம் form data படிக்கவும்.

Fork

export default function EditPost() {
  function handleSubmit(e) {
    // Prevent the browser from reloading the page
    e.preventDefault();
    // Read the form data
    const form = e.target;
    const formData = new FormData(form);
    // You can pass formData as a fetch body directly:
    fetch('/some-api', { method: form.method, body: formData });
    // You can generate a URL out of it, as the browser does by default:
    console.log(new URLSearchParams(formData).toString());
    // You can work with it as a plain object.
    const formJson = Object.fromEntries(formData.entries());
    console.log(formJson); // (!) இதில் multiple select values சேராது
    // Or you can get an array of name-value pairs.
    console.log([...formData.entries()]);
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        உங்களுக்கு பிடித்த பழம் தேர்வு செய்யுங்கள்:
        <select name="selectedFruit" defaultValue="orange">
          <option value="apple">ஆப்பிள்</option>
          <option value="banana">வாழைப்பழம்</option>
          <option value="orange">ஆரஞ்சு</option>
        </select>
      </label>
      <label>
        உங்களுக்கு பிடித்த எல்லா காய்கறிகளையும் தேர்வு செய்யுங்கள்:
        <select
          name="selectedVegetables"
          multiple={true}
          defaultValue={['corn', 'tomato']}
        >
          <option value="cucumber">வெள்ளரிக்காய்</option>
          <option value="corn">சோளம்</option>
          <option value="tomato">தக்காளி</option>
        </select>
      </label>
      <hr />
      <button type="reset">Reset</button>
      <button type="submit">Submit</button>
    </form>
  );
}

Note

உங்கள் <select>-க்கு name கொடுக்கவும், உதாரணமாக <select name="selectedFruit" />. நீங்கள் specify செய்த name, form data-இல் key ஆக பயன்படுத்தப்படும், உதாரணமாக { selectedFruit: "orange" }.

<select multiple={true}> பயன்படுத்தினால், form-இலிருந்து படிக்கும் FormData ஒவ்வொரு selected value-யையும் தனித்த name-value pair ஆக include செய்யும். மேலுள்ள example-இல் console logs-ஐ கவனமாகப் பாருங்கள்.

Pitfall

Default ஆக, <form> உள்ளே உள்ள எந்த <button>-யும் அதை submit செய்யும். இது ஆச்சரியமாக இருக்கலாம்! உங்களுக்கென custom Button React component இருந்தால், <button> பதிலாக <button type="button"> return செய்வதைப் பரிசீலிக்கவும். பின்னர் explicit ஆக, form submit செய்ய வேண்டிய buttons-க்கு <button type="submit"> பயன்படுத்தவும்.

State variable மூலம் select box control செய்தல்

<select /> போன்ற select box uncontrolled. <select defaultValue="orange" /> போல initially selected value pass செய்தாலும், உங்கள் JSX initial value-ஐ மட்டுமே specify செய்கிறது; இப்போது உள்ள value-ஐ அல்ல.

Controlled select box render செய்ய, அதற்கு value prop pass செய்யவும். React select box எப்போதும் நீங்கள் pass செய்த value வைத்திருக்க force செய்யும். பொதுவாக, state variable declare செய்து select box-ஐ control செய்வீர்கள்:

function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('orange'); // State variable declare செய்க...
  // ...
  return (
    <select
      value={selectedFruit} // ...select value state variable-க்கு match ஆக force செய்க...
      onChange={e => setSelectedFruit(e.target.value)} // ...மற்றும் எந்த change ஆனாலும் state variable update செய்க!
    >
      <option value="apple">ஆப்பிள்</option>
      <option value="banana">வாழைப்பழம்</option>
      <option value="orange">ஆரஞ்சு</option>
    </select>
  );
}

ஒவ்வொரு selection-க்கும் response ஆக UI-ன் ஒரு பகுதியை re-render செய்ய விரும்பினால் இது பயனுள்ளதாகும்.

Fork

import { useState } from 'react';

export default function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('orange');
  const [selectedVegs, setSelectedVegs] = useState(['corn', 'tomato']);
  return (
    <>
      <label>
        ஒரு பழம் தேர்வு செய்யுங்கள்:
        <select
          value={selectedFruit}
          onChange={e => setSelectedFruit(e.target.value)}
        >
          <option value="apple">ஆப்பிள்</option>
          <option value="banana">வாழைப்பழம்</option>
          <option value="orange">ஆரஞ்சு</option>
        </select>
      </label>
      <hr />
      <label>
        உங்களுக்கு பிடித்த எல்லா காய்கறிகளையும் தேர்வு செய்யுங்கள்:
        <select
          multiple={true}
          value={selectedVegs}
          onChange={e => {
            const options = [...e.target.selectedOptions];
            const values = options.map(option => option.value);
            setSelectedVegs(values);
          }}
        >
          <option value="cucumber">வெள்ளரிக்காய்</option>
          <option value="corn">சோளம்</option>
          <option value="tomato">தக்காளி</option>
        </select>
      </label>
      <hr />
      <p>உங்களுக்கு பிடித்த பழம்: {selectedFruit}</p>
      <p>உங்களுக்கு பிடித்த காய்கறிகள்: {selectedVegs.join(', ')}</p>
    </>
  );
}

Pitfall

onChange இல்லாமல் value pass செய்தால், option select செய்வது impossible ஆகும். Select box-ஐ value pass செய்து control செய்யும்போது, நீங்கள் pass செய்த value அதற்கு எப்போதும் இருக்க வேண்டும் என்று force செய்கிறீர்கள். எனவே value ஆக state variable pass செய்து, onChange event handler போது அந்த state variable-ஐ synchronously update செய்ய மறந்தால், ஒவ்வொரு keystroke பிறகும் React select box-ஐ நீங்கள் specify செய்த value-க்கு revert செய்யும்.

HTML-இல் போல அல்லாமல், தனிப்பட்ட <option>-க்கு selected attribute pass செய்வது supported இல்லை.

Previous<progress>

Next<textarea>