使用逗号在 #react-select 上创建一个新标签

Question

在版本 1.3.0 上，每次用户按“，”键时，react-select 都会创建一个新标签，这很有用，因为在实现这个库之前，我们有一些案例是用户引入标签作为按回车键而不是多个字符串。

不幸的是，在 2.0 的重构之后我找不到任何方法来做到这一点，有什么方法可以配置这种行为吗？

• Example on version 1.3.0
• Example on lastest version

Answer 1

您需要自定义一点react-select 才能实现您想要的。

基本上这就是我最终得到的结果：

import React, { Component } from "react";

import CreatableSelect from "react-select/lib/Creatable";

type State = {
  options: [{ [string]: string }],
  value: string | void
};

const createOption = (label: string) => ({
  label,
  value: label.toLowerCase().replace(/\W/g, "")
});

const defaultOptions = [
  createOption("One"),
  createOption("Two"),
  createOption("Three")
];

export default class CreatableAdvanced extends Component<*, State> {
  state = {
    inputValue: "",
    options: defaultOptions,
    value: []
  };
  onKeyDown = e => {
    if (e.keyCode === 188) {
      e.preventDefault();
      if (this.state.inputValue !== "") {
        this.handleCreate(this.selectRef.state.inputValue.slice(0, -1));
      }
    } else {
      this.setState({ inputValue: this.state.inputValue + e.key });
    }
  };
  handleChange = (newValue: any, actionMeta: any) => {
    this.setState({ value: newValue });
  };
  handleCreate = (inputValue: any) => {
    const { options, value } = this.state;
    const newOption = createOption(inputValue);
    this.setState({
      inputValue: "",
      options: [...options, newOption],
      value: [...value, newOption]
    });
  };
  render() {
    const { isLoading, options, value } = this.state;
    return (
      <CreatableSelect
        ref={r => (this.selectRef = r)}
        isClearable
        isMulti
        isDisabled={isLoading}
        isLoading={isLoading}
        inputValue={this.state.inputValue}
        onKeyDown={this.onKeyDown}
        onChange={this.handleChange}
        onCreateOption={this.handleCreate}
        options={options}
        value={value}
      />
    );
  }
}

这里是您想要的live example。

这个想法是绕过select的原生inputValue并传递你自己的。使用onKeyDown 函数，您可以决定填充inputValue 或创建一个新标签。