这段时间应新公司要求，开始搞前端啦，而且要用以前从没接触过的React框架来做，是有点压力的，而且也踩了不少坑。现在把其中一些经验教训总结下。
关于Material UI
就和饿了么的Element UI是基于Vue的UI框架一样，Material UI是基于React的UI框架，提供了很多封装好的组件，便于前端开发者进行页面开发。
官方网站：https://material-ui.com/zh/getting-started/installation/
Material UI 用法实例
下面用一个例子，假设要做一个搜索用户的功能，使用Material UI 里提供的输入框和按钮来做。那么关键代码如下：
先导入输入框和按钮控件：
import {
TextField, Button } from '@material-ui/core';
然后定义一个变量，表示用户输入的搜索内容：
const [searchContent, setSearchContent] = React.useState("");
这里变量的定义用到了React的Hooks功能，上面代码的意思是定义了一个名为searchContent的变量，初始值为“”，而setSearchContent()是对这个变量进行更新的方法，要更新的话传入新值即可。
关于React的Hooks用法，可查看文档：https://reactjs.org/docs/hooks-intro.html
当然React也要导入才行：
import * as React from 'react';
然后UI的部分可以这么写，其中的中文注释部分需要去掉才能使用：
<TextField
onChange={
onUserNameChange} 对输入文字的监听事件
variant="outlined" 样式为外边框
size="small" 大小
className={
classes.searchInput} css样式/>
<Button
variant="contained" 样式为颜色填充
color="secondary" 填充的颜色
className={
classes.searchButton} css样式
disabled={
searchContent == ""} 输入框没有输入时按钮不可点击
onClick={
handleSearch}> 点击事件
search 按钮上的文字
</Button>
样式定义（className部分）我就不贴了，反正效果是这样：
关于上面的一些属性，需要说一下的是，TextField的onChange属性是用来监听、记录用户输入的关键。
对输入文字的监听事件，定义如下：
const onUserNameChange = (event) => {
// event.target.value即为输入框输入的文字
setSearchContent(event.target.value)
}
还有搜索按钮的点击事件：
const handleSearch = async (event) => {
const response = await searchUser(searchContent);
//searchUser即为搜索接口，就不贴代码了，下面可以对response进行处理
···
}
这样我们就完成了使用 Material UI 开发一个输入和搜索的初步功能。
关于Formik
Formik是Form表单库，使用它可以方便地管理表单的数据更新提交等功能，可以在React 或者 React Native里使用。
官方网站：https://formik.org/docs/overview
Formik的方便之处，在于变量和UI控件的双向绑定，变量的更新会直接刷新UI，同时用户的输入等操作也会直接更新变量的值。看个例子：
Formik的使用实例
这是个很丑很简单的表单，功能是修改用户名，其中输入框是用来输入的，右边的按钮是自动生成用户名，下面的按钮是提交按钮。
那么用Formik如何实现呢，先创建用户信息实体，以传入这个表单：
interface UserInfoEntity {
userId: string; //用户ID
userName: string; //用户名
};
// 创建一个用户对象信息，初始化用户名为空
const createEmptyUserInfo = () : UserInfoEntity => {
return {
userId: myId,//这里的myId即为要设置用户名的用户ID
userName: "",
}
}
然后UI的编写，先导入相关控件：
import {
Box, Button, Typography } from '@material-ui/core';
import {
Formik, Form, Field } from "formik";
import {
TextField } from 'formik-material-ui';
然后UI实现：
<Formik
onSubmit={
(values) => {
handleSubmit(values);}}
initialValues={
createEmptyUserInfo()}>
{
({
setFieldValue }) => (
<>
<Form>
<Box className={
classes.dialogItem}>
<Typography className={
classes.dialogItemTitle}>
Name
</Typography>
<Field
component={
TextField}
variant="outlined"
size="small"
className={
classes.dialogItemInput}
type="text"
name="userName"
/>
<Button
variant="outlined"
color="secondary"
className={
classes.generateButton}
onClick={
()=>{
setFieldValue('userName', getRandomString())}}
>
Generate
</Button>
</Box>
<Button
type="submit"
color="secondary"
variant="contained"
>
Done
</Button>
</Form>
</>
)}
</Formik>
看着有点复杂，解释一下：
- 第二行onSubmit={(values) => {handleSubmit(values);}}意思就是表单提交时所执行的方法为handleSubmit(values)。那么怎么触发表单提交呢？看最后一个按钮，其type=“submit”，就指定了点击这个按钮，会触发表单提交，不用再设置onClick。
- 然后values就是第三行initialValues所指定的值，本例中也就是createEmptyUserInfo()的返回值。initialValues是初始值，用户经过各种操作，最后提交的时候，传入handleSubmit(values)的values就是更新后的值。
- <Field component={TextField} type=“text” name=“userName”/> 这段就指定了一个类型为文本的输入框，其绑定的字段名为“userName”。也就是我们传入表单的用户信息实体的userName属性。我们在文本框输入，或者点击“generate”按钮自动生成用户名时，这个实体的userName的值都会随之改变，不用像纯使用Material UI那样添加onChange事件手动更新。
- 点击“generate”按钮，自动生成用户名，这个是怎么实现的呢，它设置了onClick属性：onClick={()=>{setFieldValue(‘userName’, getRandomString())}}意思就是点击按钮，设置“userName”这个属性的值为getRandomString()方法返回的值。setFieldValue()方法是Formik提供的方法，用来更新组件的值。
再贴一下上面需要的几个方法：
// 生成5位随机字符串
const getRandomString = () => {
let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678",
a = t.length,
n = "";
for (let i = 0; i < 5; i++) {
n += t.charAt(Math.floor(Math.random() * a));
}
return n;
}
const handleSubmit = async (entity: UserInfoEntity) => {
// setUserName方法是自定义的API请求方法，用来设置用户名，就不贴代码了
const response = await setUserName(entity);
// 下面对response 做处理
···
};
这样，就初步实现了Formik做表单输入框和按钮提交的配合使用。
Material UI 和Formik一起使用的坑
上面展示了Material UI 和Formik分别如何使用。那如果一块使用，就要特别小心了。
细心的你可能注意到，Material UI单独使用的时候，用到的TextField控件是自己的，而Formik单独使用的时候，也会导入自己的TextField。如果你稍不注意，就用混了。
那么Formik如果用了Material的TextField，会怎么样呢，我踩过的一个坑就是，Formik的validation，即表单验证规则会失效，本例中没有用到。
而Material UI 如果使用了Formik的TextField，则设置onChange属性会失效。总之弄混了都不能正常工作。
除了TextField之外，还有CheckBox等控件，在它们那命名都一样的。
那有什么好办法可以解决吗？起码有两个办法：
1.封装控件。比如封装Material UI的TextField，命名为MaterialTextField。然后在其他地方使用封装的控件，不要使用原始控件。
2.用import as进行重命名。比如import { TextField as MaterialTextField } from '@material-ui/core';就把Material UI的TextField重命名为MaterialTextField。然后在本文件中就可以用MaterialTextField进行使用。
转载：https://blog.csdn.net/fenggering/article/details/117170084