Question

我在依赖的下拉列表上使用react-select。选项2将取决于选项1。我使用filter（）来显示哪个Options2。然后，我想每次selectOption更改时清除/重置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

首先，进行两个单独的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

我认为问题在于“选择”组件不知道您实际选择了什么。 “选择”组件可以单独呈现选定的项目，但是由于您没有明确告诉它，它不会记住您以后选择的内容。

您应该传递value属性给您。从您的状态中选择带有selectedOption和selectedOption2的组件。

如代码示例中的Tushar Agarwal所示。

如何清除“选择/重置”选择选项到“选择..” / null中？

2 个答案: