Codesandbox我试图在下面的图表中设置一个月份过滤器 - 我想按月过滤，就像这样 但是，目前，我无法在我的代码中实现这一点。

  export default class App extends Component {
  constructor(props) {
    super(props);
    const title = "chart-filter";
    const lessThanOrGreaterThan = "lessThan";
    const filterLimit = 100;
    const from = "0";
    const toMonth = "7";
    const months = [
      { month: "Jan", value: "0" },
      { month: "Feb", value: "1" },
      { month: "Mar", value: "2" },
      { month: "Apr", value: "3" },
      { month: "May", value: "4" },
      { month: "Jun", value: "5" },
      { month: "Jul", value: "6" },
      { month: "Aug", value: "7" }
    ];
    this.levelsArr = [
      "Jan",
      "Feb",
      "Mar",
      "April",
      "May",
      "June",
      "July",
      "Aug"
    ];
    this.chartData = {
      dataSet1: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590) + 10
      ),
      dataSet2: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590) + 10
      )
    };
    this.state = {
      months: [
        { month: "Jan", value: "0" },
        { month: "Feb", value: "1" },
        { month: "Mar", value: "2" },
        { month: "Apr", value: "3" },
        { month: "May", value: "4" },
        { month: "Jun", value: "5" },
        { month: "Jul", value: "6" },
        { month: "Aug", value: "7" }
      ],
      from: "0",
      toMonth: "7"
    };
  }
  componentDidMount() {
    this.barChart = new Chart("bar", {
      type: "bar",
      options: {
        responsive: true,
        title: {
          display: true,
          text: "Student Admission Data"
        }
      },
      data: {
        labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July", "Aug"],
        datasets: [
          {
            type: "bar",
            label: "School 1",
            data: this.chartData.dataSet1,
            backgroundColor: "rgba(20,200,10,0.4)",
            borderColor: "rgba(20,200,10,0.4)",
            fill: false
          },
          {
            type: "bar",
            label: "School 2",
            data: this.chartData.dataSet2,
            backgroundColor: "rgba(100,189,200,0.4)",
            borderColor: "rgba(100,189,200,0.4)",
            fill: false
          }
        ]
      }
    });
  }

  applyDateFilter() {
    this.barChart.data.labels = this.levelsArr.slice(
      parseInt(this.from),
      parseInt(this.toMonth) + 1
    );
    this.barChart.update();
  }
  render() {
    return (
      <div class="chart-diplay">
        <div>
          <canvas id="bar"></canvas>
          <div>
            <select
              id="from"
              value={this.state.from}
              onChange={(e) => this.setState({ from: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
            &nbsp;&nbsp;
            <select
              id="toMonth"
              value={this.state.toMonth}
              onChange={(e) => this.setState({ toMonth: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
          </div>
          <button class="button" onClick={() => this.applyDateFilter()}>
            Apply Date Filter
          </button>
        </div>
      </div>
    );
  }
}

以下是此函数返回 的内容无论我选择哪个月份范围，它都只会渲染 Jan 到 Jan。我认为问题在于如何定义选择。由于某种原因，变量“from”和“toMonth”没有得到更新。