[英]Integrate redux form with react tag autocomplete
Anyone able to get React Tag Autocomplete work with redux form and have redux form do the management of data?任何人都能够使用 redux 表单获得 React Tag Autocomplete 并拥有 redux 表单来管理数据? https://github.com/i-like-robots/react-tags
https://github.com/i-like-robots/react-tags
Basically, in redux-form you can create a custom component and use it into form基本上,在 redux-form 中,您可以创建自定义组件并将其用于表单
In your case, you have to create a custom component for react-tags like this在您的情况下,您必须像这样为 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;
And import into redux form并导入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);
Check this codesanbox for live demo https://codesandbox.io/s/redux-form-simple-example-mg47k检查此代码框以获取现场演示https://codesandbox.io/s/redux-form-simple-example-mg47k
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.