react-tag-autocomplete 与 redux 形式答案

【问题标题】：react-tag-autocomplete with redux formreact-tag-autocomplete 与 redux 形式
【发布时间】：2020-06-15 22:11:14
【问题描述】：

我正在尝试将 react-tag-autocomplete 与 redux 表单一起使用。

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

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

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

【问题讨论】：

标签： reactjs redux autocomplete react-redux redux-form

【解决方案1】：

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

提示说明 - 建议组件仍处于测试版。您必须将您的库更新到版本 6。

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

代码 sn-p

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}
    />
  );
};

【讨论】：