Question

我正在尝试创建一个名为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吗？这种多选组件的最佳实践是什么？

Answer 1

您可以通过event.target.selectedOptions访问选定的项目。

DoubleVar

代码和框：

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

Answer 2

也许我对问题的理解不正确，但是您应该可以将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;

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

2 个答案: