Как разрешить пользователям выбирать несколько вариантов в теге выбора в React? - PullRequest
0 голосов
/ 08 ноября 2019

Я пытаюсь создать компонент с именем SelectMultiple.

import React, { useState } from "react";

const SelectMultiple = () => {
  const [skills, setSkills] = useState([]);

  const handleChange = event => {
    const { value } = event.target;

    const indexOfValue = skills.indexOf(value);

    if (indexOfValue === -1) {
      setSkills([...skills, value]);
    } else {
      setSkills(skills.filter(skill => skill !== value));
    }
  };

  return (
    <select multiple={true} value={skills} onChange={handleChange}>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
    </select>
  );
};

export default SelectMultiple;

Когда я запускаю этот код, нажмите HTML, HTML выбран, снова нажмите HTML, очевидно, он не отменяется, потому что событие onChange не имеетуволен.

Каков наилучший способ обойти это? Должен ли я использовать реф вместо? Какова наилучшая практика для такого мультиселектора?

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

Вы можете получить доступ к выбранным элементам через event.target.selectedOptions.

function SelectMultiple () {
  const [skills, setSkills] = useState([]);

  const handleChange = event => {

    var selectedSkills = Array.from(event.target.selectedOptions, (item) => item.value)

    setSkills(selectedSkills);
  };

  return (
    <>
    <select multiple={true} value={skills} onChange={handleChange}>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
    </select>
    <hr />
     Selected Skills{JSON.stringify(skills)}
    </>
  );
}

Codesandbox:

https://codesandbox.io/s/select-multiple-5w0tw

0 голосов
/ 08 ноября 2019

Возможно, я не правильно понимаю вопрос, но вы можете изменить onChange на onClick. Это делает то, что вы хотите?


const SelectMultiple = () => {
  const [skills, setSkills] = useState([]);
  console.log("hit");
  const handleChange = event => {
    const { value } = event.target;
    const indexOfValue = skills.indexOf(value);
    console.log(indexOfValue, value);
    if (indexOfValue === -1) {
      setSkills([...skills, value]);
    } else {
      setSkills(skills.filter(skill => skill !== value));
    }
  };
  console.log(skills);

  return (
    <select multiple={true} value={skills} onClick={handleChange}>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
    </select>
  );
};

export default SelectMultiple;

...