Question

我正试图让React-Select根据用户输入显示不同的下拉菜单列表：

const helpOptions = [
  { value: "user", label: "u:<String> User Operator" },
  { value: "day", label: "d:<Number> Date Operator" },
  { value: "week", label: "w:<Number> Week Operator" },
  { value: "month", label: "m:<Number> Month Operator" },
  { value: "bracket", label: "() Brackets Operator" },
  { value: "and", label: "&& AND Operator" },
  { value: "or", label: "|| OR Operator" },
  { value: "not", label: "~ NOT Operator" }
];

const userOptions = [
  { value: "john", label: "u:John" },
];

class Field extends Component {
  state = {
    menu: userOptions,
    value: ""
  };

  onInputChange = e => {
    if (e.substring(0, 1) === "?") {
      this.setState(
        {
          menu: helpOptions,
          value: e
        },
        () => {
          console.log(this.state.menu);
        }
      );
    } else {
      this.setState({
        menu: []
      });
    }
  };

  render() {
    const { menu, value } = this.state;
    console.log("rendering");
    console.log(menu);
    return (
      <Select
        isMulti
        value={value}
        options={menu}
        onInputChange={this.onInputChange}
      />
    );
  }
}

所需的行为是，如果在搜索字段中输入的文本的第一个字符是'？'菜单将以helpOptions的常量填充。否则（暂时）为空。

Codesandbox：https://codesandbox.io/s/runtime-sun-cfg71

从控制台日志中，我似乎正在获取值，并且渲染似乎正在工作。但是，我仍然从React-Select组件得到“ No Option”作为响应。

如何根据用户输入动态更改React-Select菜单项？

Answer 1

更新

如果您希望在调用state之后更新setState，则需要使用一个仅在更新状态后才起作用的函数：

this.setState(state => ({
  ...state,
  menu: helpOptions
}));

首先，您需要在组件中调用constructor。其次，在documentation至react-select中，道具value不存在。第三，最好在更改之前复制您的状态。

这是有效的代码：

import React, { Component } from "react";
import Select from "react-select";
import "./styles.css";

const helpOptions = [
  { value: "user", label: "u:<String> User Operator" },
  { value: "day", label: "d:<Number> Date Operator" },
  { value: "week", label: "w:<Number> Week Operator" },
  { value: "month", label: "m:<Number> Month Operator" },
  { value: "bracket", label: "() Brackets Operator" },
  { value: "and", label: "&& AND Operator" },
  { value: "or", label: "|| OR Operator" },
  { value: "not", label: "~ NOT Operator" }
];

const userOptions = [
  { value: "john", label: "u:John" },
  { value: "stan", label: "d:Stan" },
  { value: "addison", label: "w:Addison" },
  { value: "dionis", label: "m:Dionis" }
];

class Field extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menu: userOptions,
      value: ""
    };
  }

  onInputChange = e => {
    if (e.substring(0, 1) === "?") {
      console.log("help");
      this.setState({
        ...this.state,
        menu: helpOptions
      });
    } else {
      this.setState({
        ...this.state,
        menu: userOptions
      });
    }
  };

  render() {
    const { menu, value } = this.state;

    return <Select isMulti options={menu} onInputChange={this.onInputChange} />;
  }
}

export default Field;

以下是codesandbox.

上的示例

使用setState更新React-Select菜单吗？

1 个答案: