带有 redux 表单的 react-tag-autocomplete

Question

我正在尝试使用 redux 形式的 react-tag-autocomplete。

这是 react-tag-autocomplete 的文档 React-tag-autocomplete

下面是 react-tag-autocomplete with redux-form

我只是想知道是否可以在列表中显示 ID 号和值（水果名称）。见下图（红色数字指的是 id）。我已经浏览了文档，但我似乎找不到任何与此相关的内容。我最终想要实现的是类似于 Whosebug 的带有 ID 号和描述的标签系统。

Answer 1

您可以使用 suggestionComponent 道具根据您的需要自定义建议。

Imp note - suggestionComponent 仍处于测试版。您必须将库更新到版本 6。

See Working copy of your code here (with version 6)

代码片段

function SuggestionComponent({ item, query }) {
  return (
    <span id={item.id}>
      {item.name} - {item.id}
    </span>
  );
}
const TagAutocomplete = ({ input: { value, onChange } }) => {
  const suggestions = [
    { id: 1, name: "Apples" },
    { id: 2, name: "Pears" },
    { id: 3, name: "Bananas" },
    { id: 4, name: "Mangos" },
    { id: 5, name: "Lemons" },
    { id: 6, name: "Apricots" }
  ];
  const newValue = !value ? [] : value;

  const handleDelete = i => {
    const tags = [...newValue];
    tags.splice(i, 1);
    onChange(tags);
  };

  const handleAdd = e => {
    console.log("e", e);
    onChange([...newValue, e]);
  };

  return (
    <ReactTags
      suggestionComponent={SuggestionComponent}
      tags={newValue}
      suggestions={suggestions}
      handleDelete={handleDelete}
      handleAddition={handleAdd}
    />
  );
};

带有 redux 表单的 react-tag-autocomplete

react-tag-autocomplete with redux form

reactjs

redux

autocomplete

react-redux

redux-form