一、class
在使用类的时候,我们会在state中建立多个key值,来存储表单的输入值:
如:
state={
name: "",
idType: "",
personId: "",
tel: "",
mobile: "",
email: "",
dwsx: "",
province: "",
city: "",
serviceType: "",
status: "",
...
}
当然,可能会有很多,可以写一个公共的方法,来改变state中的值:
// 输入框 输入
inputName = (type, e) => {
// 清空 input 和下拉框单选
if (!e) {
let tempData = {
}
tempData[type] = ''
this.setState(tempData)
return false
}
let tempData = {
}
if (e.target) {
tempData[type] = e.target.value
} else {
tempData[type] = e
}
this.setState(tempData)
}
第一个值是state中的属性key,就是我们表单绑定的值。第二个值是事件对象,我们通过事件对象来获取onChange事件改编的值。
使用:
<Input placeholder="请输入name" value={
name} title='name' onChange={
(e) => this.inputName('name', e.target.value)} />
这个时候我们就实现了onChange事件的复用,没有必要给每一个表单都加一个事件对应改编一个state中的key值。上面的赋值方法(inputName)使用于任何表单元素(text、select、checkbok等等)。
二、函数式 HOOKS
一般如果只有少量状态需要更新,我们直接使用useState即可,但是如果有很多表单元素,我们写useState都会写烦,所以我们使用useState的代替品:useReducer,主要用于组件中的状态的更新。
同样的我们要知道这个怎么用:
使用:
在react中引入useReducer这个hook。
import React, {
useReducer} from 'react'
第一个参数为我们的action函数,第二个参数为我们的reducer的初始state;
let initialState = {
name: "",
idType: "",
personId: "",
tel: "",
mobile: "",
email: "",
dwsx: "",
province: "",
city: "",
serviceType: "",
status: "",
}
const reducerFun = (state, init) => {
let obj = {
}
obj[init.key] = init.value
switch (init.type) {
case "changeValue":
return {
...state, ...obj };
case "getDetails":
return {
...state, ...init.obj }
case "resetValue":
return initialState;
default:
return state
}
}
changeValue为改变单一state的标识
getDetails可以用在返显的时候,直接多传入一个obj即可;
resetValue用于重置默认值的标识;
创建reducer:
const [state, dispatch] = useReducer(reducerFun, initialState);
let {
name}=state;
state为我们的状态对象,里面包含了initialState中的所有键值对;
dispatch为改变对象state的触发函数,触发相应的action即可动态改变state的状态,hook会自动的帮我们render。
页面:
<RSInput title="节点名称" placeholder="请输入" value={
name} onChange={
(e) => {
inputName('name', e) }} />
inputName函数主要用于更新reducer的状态:
// 输入框输入
const inputName = (key, e) => {
e.persist && e.persist();
if (e.target) {
dispatch({
type: 'changeValue', key, value: e.target.value })
} else {
dispatch({
type: 'changeValue', key, value: e })
}
}
当然,当元素少的时候我们试试使用useState毕竟方便。useReducer只是一种解决方案,我们还是可以全使用useState.
其他文章
1.hooks实现toDoList
2.hooks实现左添右减
3.React实现添加多行输入框(点击一行增加一行)
4.React页面跳转取消上一个页面的所有请求
5.React配合axios请求拦截校验session,403跳转至登陆页面
6.Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能
7.Hooks使用useReducer、createContext 、useContext实现模块数据共享,类似全局状态管理但不推荐做全局管理
六卿
见贤思齐焉,见不贤内自省