Обновление меню React-Select с помощью setState? - PullRequest
Новая
       11

Обновление меню React-Select с помощью setState?

0 голосов
/ 21 апреля 2020

Я пытаюсь заставить 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.

Как я могу динамически изменять пункты меню React-Select на основе ввода пользователя?

1 Ответ

0 голосов
/ 21 апреля 2020

Обновление

Если вы хотите, чтобы ваш state обновлялся после вызова setState, вам нужно использовать функцию, которая будет работать только после обновления состояния: 

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

Прежде всего вам нужно вызвать конструктор в вашем компоненте. Во-вторых, в документации до react-select prop 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;

Вот пример коды и коробки.

...