reactjs - 将 redux 表单与 react 标签自动完成集成
问题描述
任何人都能够使用 redux 表单获得 React Tag Autocomplete 并让 redux 表单来管理数据? https://github.com/i-like-robots/react-tags
解决方案
基本上,在 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
推荐阅读
- android - 片段事务后Android滚动视图保持滚动位置
- java - 为什么我的可执行 jar 找不到主类?
- javascript - 属性-属性同步
- java - ConcurrentHashMap 的 forEach 方法是线程安全的吗?
- asp.net-mvc - 模态形式未显示为模态
- mysql - mysql对多行特定条件进行排名
- python-3.x - ImportError:没有系统模块'pywintypes'(pywintypes39.dll)
- java - 测试时如何从 MockWebServer 中提取参数?
- sql-server - 无法使用 SQL Server 上的链接服务器插入具有 xml 列的表
- javascript - 如何单击按钮并显示表格中的列?