简介
@jamieparkinson/redux-form-material-ui 是一个用于 React 和 Redux 应用的 npm 包，其中包含了易于使用的 Material UI 表单控件和 Redux Form 用于表单数据管理的集成。
使用它可以快速地帮助开发者构建出一个美观、易用、易于管理表单数据的应用，同时还可以提高代码复用和项目的可维护性。
本教程将介绍如何使用 npm 包 @jamieparkinson/redux-form-material-ui 进行开发，并提供示例代码。
安装
首先需要在项目目录下使用 npm 安装包 @jamieparkinson/redux-form-material-ui。
$ npm install @jamieparkinson/redux-form-material-ui --save
使用
添加依赖
在项目中，需要引入 Material UI 和 Redux Form 的依赖，这里我们使用 npm 安装相关的包。
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import MenuItem from 'material-ui/MenuItem';
import { SelectField, TextField } from 'redux-form-material-ui';
// ... 其他代码创建表单
在创建表单前，需要先定义表单所需要的字段。Redux Form 提供了 Field 组件用于创建表单控件。
-- -------------------- ---- -------
----- -------- - -
-----
--------
------
--
----- -------- - ----- -- ------ -- ---- - ---------- - -----------
--- ---------- - ----- -- -
----- - ------------- --------- ------ ---------- - - ------
------ -
----- ------------------------
-----
------
----------------
---------------------
--------------- -----
-------------------
--
------
-----
------
---------------
---------------------
-------------- -----
-------------------
--
------
-----
------
------------
---------------------
----------------
-------------------- -------
--
------
-----
------
--------------
-----------------------
------------- -----
---------------------- -----
-
------------------ -- -
--------- ---------- ------------ ------------------ --
---
--------
------
-----
------- ------------- ------------------ -- ------------
------
---------
------- ------------- ------------------ -- ----------- ----------------
----- ------
---------
------
-------
--
--
---------- - -----------
----- --------- -- - ------ ---------- --- ---- ----
---------------渲染表单
在渲染表单时，只需要调用对应的表单组件即可。
-- -------------------- ---- -------
----- --- ------- --------- -
-------- -
------ -
-----
---------- ---------
----------- ---------------------- --
------
--
-
-这里的 showResults 就是我们所需要使用的表单数据的处理函数。
const showResults = values => {
// log the form values
console.log(values);
};总结
通过引入 @jamieparkinson/redux-form-material-ui 这个 npm 包，我们可以轻松地在项目中使用 Material UI 的表单控件并进行表单数据管理。
上述例子中，我们定义了一个简单的表单，并在其提交时打印了其表单数据。开发者可以在此基础上进行更多的开发和功能扩展，以满足项目的实际需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e24433c