重大ui自动完成功能：能否在“ Enter”事件以外的事件上创建标签？

Question

我目前正在使用freesolo自动完成功能，并且我的特定用例要求在逗号或空格跟随输入文本时创建标记。当前，自动完成功能会在Enter事件上创建标签，但我认为自动完成功能中没有内置任何功能，但支持任何其他事件的标签创建。我想知道我是否缺少任何东西，或者如果我没有，我该如何解决这个问题？

当前，我正在尝试使用Autocomplete中的onInputChange属性来捕获传入的字符串。我检查该字符串中的逗号和空格，并在成功找到这些字符之一的情况下，使用一些本地JS手动触发了Enter事件。码。这在某些情况下有效，但并非在所有情况下都有效，并且考虑所有情况变得很乏味。这种方法似乎容易出现很多问题，而且我不认为这是在不同事件上实现标记创建的最佳方法。寻找一些想法。谢谢

onInputChange 属性用法：

<Autocomplete
        multiple
        freeSolo
        filterSelectedOptions
        id="auto-complete"
        options={foo.map(bar => bar.name)}
        ref={autoRef}
        onInputChange={(e, value) => {
            createTagOnEvent(value);
        }}/>

在输入中搜索逗号和空格并手动触发Enter事件：

const createTagOnEvent = (bar) => {
    if (pattern.test(bar)) {
        const ke = new KeyboardEvent("keydown", {bubbles: true, cancelable: true, keyCode: 13});
        autoRef.current.dispatchEvent(ke);
    }
};

Answer 1

以下是我推荐的方法。

该方法有两个主要方面：

1. 使用“受控”输入方法进行控制，Autocomplete以便您可以完全控制当前值。

2. 用适当的逻辑指定onKeyDown用于TextField输入的处理程序，params.inputProps.onKeyDown以添加新值。

    import React from "react";
    import TextField from "@material-ui/core/TextField";
    import Autocomplete from "@material-ui/lab/Autocomplete";

    export default function Tags() {
      const [value, setValue] = React.useState([top100Films[13]]);
      const handleKeyDown = event => {
        switch (event.key) {
          case ",":
          case " ": {
            event.preventDefault();
            event.stopPropagation();
            if (event.target.value.length > 0) {
              setValue([...value, event.target.value]);
            }
            break;
          }
          default:
        }
      };
      return (
        <div style={{ width: 500 }}>
          <Autocomplete
            multiple
            freeSolo
            id="tags-outlined"
            options={top100Films}
            getOptionLabel={option => option.title || option}
            value={value}
            onChange={(event, newValue) => setValue(newValue)}
            filterSelectedOptions
            renderInput={params => {
              params.inputProps.onKeyDown = handleKeyDown;
              return (
                <TextField
                  {...params}
                  variant="outlined"
                  label="filterSelectedOptions"
                  placeholder="Favorites"
                  margin="normal"
                  fullWidth
                />
              );
            }}
          />
        </div>
      );
    }

    // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
    const top100Films = [
      { title: "The Shawshank Redemption", year: 1994 },
      { title: "The Godfather", year: 1972 },
    // ... many more options
    ];

这是打字稿版本：

    /* eslint-disable no-use-before-define */
    import React from "react";
    import TextField from "@material-ui/core/TextField";
    import Autocomplete, { RenderInputParams } from "@material-ui/lab/Autocomplete";

    interface ObjectOption {
      title: string;
      year: number;
    }
    type Option = ObjectOption | string;

    interface MyInputProps {
      onKeyDown: (event: object) => void;
    }
    interface MyParams extends RenderInputParams {
      inputProps: MyInputProps;
    }

    export default function Tags() {
      const [value, setValue] = React.useState([top100Films[13]]);
      const handleKeyDown = event => {
        switch (event.key) {
          case ",":
          case " ": {
            event.preventDefault();
            event.stopPropagation();
            if (event.target.value.length > 0) {
              setValue([...value, event.target.value]);
            }
            break;
          }
          default:
        }
      };
      return (
        <div style={{ width: 500 }}>
          <Autocomplete
            multiple
            freeSolo
            id="tags-outlined"
            options={top100Films}
            getOptionLabel={option => {
              if (typeof option === "string") {
                return option;
              }
              return option.title;
            }}
            value={value}
            onChange={(event, newValue) => setValue(newValue)}
            filterSelectedOptions
            renderInput={(params: MyParams) => {
              params.inputProps.onKeyDown = handleKeyDown;
              return (
                <TextField
                  {...params}
                  variant="outlined"
                  label="filterSelectedOptions"
                  placeholder="Favorites"
                  margin="normal"
                  fullWidth
                />
              );
            }}
          />
        </div>
      );
    }

    // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
    const top100Films: ObjectOption[] = [
      { title: "The Shawshank Redemption", year: 1994 },
      { title: "The Godfather", year: 1972 },
    // ... many more options
    ];