npm 包 redux-form-grommet 使用教程
前言
redux-form-grommet 是基于 redux-form 和 grommet 的可用于构建 React 组件的表单解决方案。
安装和配置
在使用之前，需要先安装相关依赖。
npm i -S react redux react-redux redux-form grommet redux-form-grommet
完成安装后，在对应组件中添加以下代码：
-- -------------------- ---- -------
------ - ------- - ---- ----------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ---------- ------- - ---- -------------
------ - ----------- - ---- ---------------------
----- ----- - ---------------------
----- -------- - -------- -- -
--------------------
--
----- ----------- - -----------
----- ----------
----------------- -- -
----- ----------------------------------
--- ------ ---
-------
----
----- --- - -- -- -
--------- --------------
---------
------------ --
----------
-----------
--
完成以上配置后，即可开始使用 redux-form-grommet 来构建表单。
示例
输入框
import { GrommetTextInput, withFormField } from 'redux-form-grommet';
const TextInput = withFormField(GrommetTextInput);
<TextInput
name="exampleInput"
label="输入框"
/>下拉框
-- -------------------- ---- -------
------ - -------------- ------------- - ---- ---------------------
----- ------ - -----------------------------
-------
--------------------
-----------
----------
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
--
--复选框
import { GrommetCheckBox, withFormField } from 'redux-form-grommet';
const CheckBox = withFormField(GrommetCheckBox);
<CheckBox
name="exampleCheckBox"
label="复选框"
/>单选框
-- -------------------- ---- -------
------ - ------------------- ------------- - ---- ---------------------
----- ----------- - ----------------------------------
------------
-------------------------
-----------
----------
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
--
--更多示例请参考官方文档。
结语
redux-form-grommet 的出现，为我们在使用 redux-form 时提供了更多可以选择的表单组件库，能够更加快速、方便地构建出高质量的表单。如果您正在寻找一款强大的表单解决方案，那么 redux-form-grommet 绝对是您不可错过的一个选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea981e8991b448dc11f