استرداد القيمة من <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>
  );
}