استرداد القيمة من <select> بخيارات متعددة في React

Rayden Storm · 31 مارس 2021

في select العادي يمكننا استخراج قيمته كما نستخرجها من input عادي لكن ماذا ان كان لدينا select يقبل خيارات متعددة كيف يمكننا التعامل معه ووضع قيمه في ال state

import React from 'react';

export default function Select() {
const [state, setState] = useState()

const handleChange = (e) => {
    setState(????)
}

  return (
    <div>
      <select name="select" multiple={true} onChange={handleChange}>
        <option value={1}>First option</option>
        <option value={2}>Second option</option>
        <option value={3}>Third option</option>
      </select>
    </div>
  );
}

Abdullah Muhammad · 31 مارس 2021

عن طريق عمل مصفوفه من الخيارات التي تم تحديدها وذلك كالتالي

export default function Select() {
  const [state, setState] = useState();


  const handleChange = (e) => {
    let value = Array.from(e.target.selectedOptions, (option) => option.value);
    setState(value);
};

  return (
    <div>
      <select name="select" multiple={true}  onChange={handleChange}>
        <option value={1}>First option</option>
        <option value={2}>Second option</option>
        <option value={3}>Third option</option>
      </select>
    </div>
  );
}

استرداد القيمة من <select> بخيارات متعددة في React

السؤال

Rayden Storm

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Abdullah Muhammad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية