如何清除 Select / 将 Select 选项重置为 "Select.." / null？

Question

我在依赖的下拉列表中使用了 react-select。 Options2 将依赖于 Options1。我使用 filter() 来显示将显示哪个 Options2。然后我想在每次 selectedOption 更改时清除/重置 selectedOption2。我添加了我的价值道具，以便您可以理解。当 selectedOption 更改时，selectedOption2 将变为 "Select.."。我试图解决此代码，但我不能。

import React, { Component } from "react";

import Select from "react-select";
import { options1, options2 } from "./data";

class Esensial extends Component {
  constructor() {
    super();
    this.state = {
      selectedOption: {},
      selectedOption2: {}
    };
  }

  handleChange1 = selectedOption => {
    this.setState({ selectedOption });
    this.setState({ selectedOption2: null });
  };

  handleChange2 = selectedOption => {
    this.setState({ selectedOption2: selectedOption });
  };
  render() {
   const options1 = [
      { value: "One", 
        label: "One" 
      },
      {
        value: "Two",
        label: "Two"
      }];
   const options2 = [
      {
        value: "One-A",
        label: "One-A",
        link: "One"
      },
      {
        value: "One-B",
        label: "One-B",
        link: "One"
      },
      {
        value: "Two-A",
        label: "Two-A",
        link: "Two"
      },
      {
        value: "Two-B",
        label: "Two-B",
        link: "Two"
       }];

    const filteredOptions = options2.filter(
      o => o.link === this.state.selectedOption.value
    );

    return (
      <div>
        <h1>UKM Esensial</h1>

        <div className="form-group">
          <label>Pilih Jenis Upaya Pelayanan Kesehatan</label>
          <Select
            className="form-control"
            isClearable={false}
            onChange={this.handleChange1}
            options={options1}
          />
        </div>
        <div className="form-group">
          <label>Pilih Variable</label>
          <Select
            className="form-control"
            isClearable
            onChange={this.handleChange2}
            options={filteredOptions}
          />
        </div>
      </div>
    );
  }
}
export default Esensial;

Answer 1

首先，进行 2 次单独的 setState 调用不是一个好主意。其次，我没有在 Select 元素上看到 value 属性集。以下代码应该有效：

import React, { Component } from "react";

import Select from "react-select";
import { options1, options2 } from "./data";

class Esensial extends Component {
  constructor() {
    super();
    this.state = {
      selectedOption: {},
      selectedOption2: {}
    };
  }

  handleChange1 = selectedOption => {
    this.setState({ selectedOption, selectedOption2: null });
  };

  handleChange2 = selectedOption => {
    this.setState({ selectedOption2: selectedOption });
  };
  render() {
    const filteredOptions = options2.filter(
      o => o.link === this.state.selectedOption.value
    );

    return (
      <div>
        <h1>UKM Esensial</h1>

        <div className="form-group">
          <label>Pilih Jenis Upaya Pelayanan Kesehatan</label>
          <Select
            className="form-control"
            isClearable={false}
            onChange={this.handleChange1}
            options={options1}
            value={this.state.selectedOption}
          />
        </div>
        <div className="form-group">
          <label>Pilih Variable</label>
          <Select
            className="form-control"
            isClearable
            onChange={this.handleChange2}
            options={filteredOptions}
            value={this.state.selectedOption2}
          />
        </div>
      </div>
    );
  }
}
export default Esensial;

Answer 2

我认为问题在于 Select 组件不知道您实际选择了什么。 Select 组件可以自己呈现所选项目，但它不会记住你后来选择的内容，因为你没有明确告诉它。

您应该将 value prop 传递给您的 Select 组件，其中包含您所在州的 selectedOption 和 selectedOption2。

如代码示例中所示。

如何清除 Select / 将 Select 选项重置为 "Select.." / null？

How to clear Select / reset Select option into "Select.." / null?

reactjs

react-select