如何动态加载 multi select？ [反应-select]

Question

如何动态加载 Multi-Select？我使用 react-select 来实现 MultiSelect.

我的努力

在 componentDidMount() 中，我获取了一个数组，我想 display/load 在我的 multi-select 中；然后将响应存储在状态中。

现在，我试图从该状态获取值，但我没有获取到该值。

我的代码

state= {Category: []}

// that category contain this values
//0: {categoryid: "1", categoryname: "Select Category"}
//1: {categoryid: "2", categoryname: "Abc"}


componentDidMount() {
    fetch("http://myURL//file.php", {
      method: "POST",

      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({})
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({ Category: responseJson });
        //  If server response message same as Data Matched

        console.log(this.state.Category);
        window.parent.location = window.parent.location.href;
      })
      .catch(error => {
        console.error(error);
      });
  }

//this code is not working, display nothing

  <Select
    closeMenuOnSelect={false}
    components={animatedComponents}
    isMulti
  >
    {this.state.Category.map((e, key) => {
      return (
        <option key={key} value={e.categoryid}>
          {e.categoryname}
        </option>
      );
    })}
  </Select>

请帮我解决这个问题

Answer 1

react-select 有选项道具。

<Select
    closeMenuOnSelect={false}
    components={animatedComponents}
    options={this.state.Category.map(e => ({ label: e.categoryname, value: e.categoryid}))}
    isMulti
    onChange={newValue => this.setState({ selected: newValue })}
  />

Answer 2

How can I select values of this multi-select based on another select component?

您可以根据 selected 值在状态和过滤器选项中为 selects 存储 selected 值。

我添加了带有 2 个相关 selects 的快速样本 - 医院（可以有几个医生）和医生（可以在几个医院工作）。

当您 select 一些医生 - 医院 selection 更新时，反之亦然。

Preview this code

    import React, { useState } from "react";
    import { render } from "react-dom";
    import Select from "react-select";
    
    const data = {
      doctors: [
        {
          id: 1,
          name: "Andrew",
          hospitals: [{ id: 1, title: "Test Hospital" }, { id: 2, title: "Test2" }]
        },
        {
          id: 2,
          name: "Another",
          hospitals: [{ id: 1, title: "Test Hospital" }, { id: 3, title: "Test3" }]
        }
      ],
      hospitals: [
        { id: 1, title: "Test Hospital" },
        { id: 2, title: "Test2" },
        { id: 3, title: "Test3" }
      ]
    };
    
    function App() {
      const [selectedDoctor, setSelectedDoctor] = useState(null);
      const [selectedHospital, setSelectedHospital] = useState(null);
    
      const hospitalOption = item => ({ value: item.id, label: item.title });
      const hospitalOptions = () => {
        if (selectedDoctor) {
          return data.doctors
            .filter(doctor => doctor.id === selectedDoctor.value)[0]
            .hospitals.map(hospitalOption);
        } else {
          return data.hospitals.map(hospitalOption);
        }
      };
    
      const doctorOption = item => ({
        value: item.id,
        label: `Doctor ${item.name}`
      });
      const doctorOptions = () => {
        if (selectedHospital) {
          return data.doctors
            .filter(
              doctor =>
                doctor.hospitals.filter(
                  hospital => hospital.id === selectedHospital.value
                ).length
            )
            .map(doctorOption);
        } else {
          return data.doctors.map(doctorOption);
        }
      };
    
      const reset = () => {
        setSelectedDoctor(null);
        setSelectedHospital(null);
      };
    
      return (
        <div className="App">
          <h3>React-Select multi select sample</h3>
          <Select
            id="hospital"
            value={selectedHospital}
            onChange={setSelectedHospital}
            options={hospitalOptions()}
            selectedDoctor={selectedDoctor}
          />
          <Select
            id="doctor"
            value={selectedDoctor}
            options={doctorOptions()}
            onChange={setSelectedDoctor}
            selectedHospital={selectedHospital}
          />
    
          <pre selectedDoctor={selectedDoctor} selectedHospital={selectedHospital}>
            Selected Doctor: {JSON.stringify(selectedDoctor || {}, null, 2)}
            <br />
            Available Doctors: {JSON.stringify(doctorOptions() || {}, null, 2)}
          </pre>
          <pre selectedDoctor={selectedDoctor} selectedHospital={selectedHospital}>
            Selected Hospital: {JSON.stringify(selectedHospital || {}, null, 2)}
            <br />
            Available Hospitals: {JSON.stringify(hospitalOptions() || {}, null, 2)}
          </pre>
          <button onClick={reset}>Reset</button>
        </div>
      );
    }
    
    render(<App />, document.getElementById("root"));

如何动态加载 multi select？ [反应-select]

How can I load multi select dynamically? [react-select]

reactjs

multi-select

react-select