將 redux 表單與反應標簽自動完成集成

Question

任何人都能夠使用 redux 表單獲得 React Tag Autocomplete 並擁有 redux 表單來管理數據？ https://github.com/i-like-robots/react-tags

Answer 1

基本上，在 redux-form 中，您可以創建自定義組件並將其用於表單

在您的情況下，您必須像這樣為 react-tags 創建一個自定義組件

import React from "react";
import ReactTags from "react-tag-autocomplete";

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" }
  ];

  console.log(value);

  const newValue = !value
    ? []
    : value.map(id =>
        suggestions.find(({ id: sugestionId }) => id === sugestionId)
      );

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

  const handleAdd = e => {
    onChange([...value, e.id]);
  };

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

export default TagAutocomplete;

並導入redux表格

import React from "react";
import { Field, reduxForm } from "redux-form";

import TagAutocomplete from "./TagAutocomplete";

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Auto complete</label>
        <div>
          <Field name="autoComplete" component={TagAutocomplete} />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "simple" // a unique identifier for this form
})(SimpleForm);

檢查此代碼框以獲取現場演示https://codesandbox.io/s/redux-form-simple-example-mg47k