时间戳

首页 > 解决方案 > 如何从 React 的下拉列表中显示多个选定的值

reactjs - 如何从 React 的下拉列表中显示多个选定的值

问题描述

我是 React 新手，我想创建一个可以选择多个值的下拉菜单。为此，我使用了 react-select 插件。在我的 React 开发工具中，选定的值正在被存储，但我无法显示所有选定的值。非常感谢任何帮助。TIA

import React, { useState } from "react";
import Select from 'react-select'

const options = [
    { value: 'React', label: 'React' },
    { value: 'Vue', label: 'Vue' },
    { value: 'Angular', label: 'Angular' },
    { value: 'Java', label: 'Java' },
  ]

    const [skills, setSkills] = useState([]);

    const handleChange = (skill) => {
        setSkills({skill})
        console.log("skills", skill);
    }
    
    return (
        <>
           <h2>Please select all your skills</h2>
             <form>
                 <Select 
                    options={options} 
                    onChange={handleChange}
                    isMulti={true}
                    value={value}
                 />
                <button>Next</button> 
            </form>

        </>
    )
}

export default UserSkills;

当我评论 isMulti 道具时，我得到了一个选定的值，但我没有得到任何 isMulti 道具。

标签： reactjsdrop-down-menuhtml-selectmulti-select

解决方案

您Select通过给它一个 来控制组件value，并且由于您没有value在handleChange函数中更新，因此它不会被更新。

您可以改为使用skills数组value，它会按预期更新。

代码沙盒

const options = [
  { value: "React", label: "React" },
  { value: "Vue", label: "Vue" },
  { value: "Angular", label: "Angular" },
  { value: "Java", label: "Java" }
];

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

  const handleChange = (skills) => {
    setSkills(skills || []);
  };

  return (
    <>
      <h2>Please select all your skills</h2>
      <form>
        <Select
          options={options}
          onChange={handleChange}
          value={skills}
          isMulti
        />
        <button>Next</button>
      </form>
    </>
  );
}

export default UserSkills;

推荐阅读