Question

任何人都能通过Reactux表单获得React Tag自动完成功能，并拥有redux表单来管理数据吗？ https://github.com/i-like-robots/react-tags

Answer 1

基本上，可以在redux格式中创建一个自定义组件并将其用于表单中

在这种情况下，您必须为此类的反应标签创建一个自定义组件

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

选中此代码sanbox进行实时演示https://codesandbox.io/s/redux-form-simple-example-mg47k

将Redux表单与react标签自动完成功能集成

1 个答案: