Question

我正在尝试向自定义对象{ label: string, value: obj }的MultiSelect添加复制和粘贴功能。

基本上我想复制用逗号分隔的不同大小（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

为对象创建具有复制粘贴功能的功能强大的Select

0 个答案: