Создать возможность Выбрать с копировать вставить функциональность для объектов - PullRequest
Новая
       7

Создать возможность Выбрать с копировать вставить функциональность для объектов

0 голосов
/ 07 февраля 2019

Я пытаюсь добавить функциональность копирования и вставки в свой MultiSelect для пользовательского объекта { label: string, value: obj }.

По сути, я хочу скопировать и вставить вставки разных размеров (widthXheight) через запятую и преобразовать ихв микросхемы, то есть 350x120, 500x124, 124x410.

Мне не удалось сделать это с помощью этого кода.

Я спрашиваю людей о реакции выбора, что является рекомендуемым способом достижениячто-то вроде этого, потому что это кажется ужасно хакерским и все еще плохо работает.

Я думал о том, чтобы он выполнял синтаксический анализ только после нажатия клавиши Enter или потери фокуса (это то, что вызывает OnBlur()?)

Часть рендера 

      <CreatableSelect
        isClearable={true}
        isMulti={true}
        isSearchable={true}
        value={this.state.sizes}
        getOptionLabel={(size) => `${size.label}`}
        isValidNewOption={(inputValue, selectValue, selectOptions) => {
          return selectOptions.some((o) => o.label !== inputValue);
        }}
        onChange={this.handleChange}
        onInputChange={this.handleSelects}
        options={this.state.availableSizes}
      />

Методы вспомогательных компонентов 

  private handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
    this.setState({ sizes: newValue });
  }

  private handleChange1 = (newValue: SizeWrapper[]) => {
    this.setState({ sizes: _.concat(this.state.sizes, newValue) });
  }

  private handleSelects = (inputValue: string) => {
    console.group('New Input');
    console.log(inputValue);
    console.groupEnd();

    if (inputValue === '') {
      return;
    }

    const values = inputValue.split(',').map(i => {
      const sizes: string[] = i.split('x');
      const newWrap: SizeWrapper= {
        label: i.trim(),
        value: new Size({
          width: sizes[0].trimLeft(),
          height: sizes[1],
        }),
      };
      return newWrap;
    });
    this.handleChange1(values);
  }

Проблемы с этим.Простое печатание создаст новый объект без ожидания пробелов;https://i.imgur.com/lklc4US.gifv

При вставке копии вставленный ввод остается даже после создания чипов;https://i.imgur.com/mLgUq8D.gifv

...