时间戳

首页 > 解决方案 > 你如何允许用户在 React 的 select 标签中选择多个选项？

javascript - 你如何允许用户在 React 的 select 标签中选择多个选项？

问题描述

我正在尝试创建一个名为 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 事件没有触发。

解决这个问题的最佳方法是什么？我应该改用 ref 吗？这种多选组件的最佳实践是什么？

标签： javascriptreactjsselect

解决方案

您可以通过 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)}
    </>
  );
}

代码沙盒：

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

推荐阅读