React input输入相关:受控方式无法更新对象类型数据(函数式组件 useState)

假设,要做一个登录系统,需要输入账号和密码,账号和密码由一个对象userInfo进行管理,我们可以初始化一个对象

let [userInfo, setUserInfo] = useState({
	account: "",
	password: ""
})

输入框可以采用受控方式:

<div className="inputItem">
 	<span>账号: </span>
  	<Input
   	 	placeholder="请输入邮箱"
   		 value={userInfo.account}
    	onChange={(e) => handleInput(e, "account")}
    	type="text"
  	></Input>
</div>
<div className="inputItem">
  <span>密码: </span>
  <Input
  	  placeholder="请牢记您的密码"
	  value={userInfo.password}
  	  onChange={(e) => handleInput(e, "password")}
 	  type="password"
  ></Input>
</div>

如果你的onChange的处理函数是这样写的:

const handleInput = (e, type) => {
   if (type === "account") {
     setUserInfo(pre => {
		pre.account = e.target.value
		return pre
	})
   } else {
	   setUserInfo(pre => {
			pre.password= e.target.value
			return pre
		})
   }
};

你会发现一个问题:虽然pre确实是被修改了,也确实是被返回了,但是不管输入什么input都是没有值的(userInfo实际上没有被修改)。

这个问题的关键其实我们都知道:state不能通过直接赋值的方式修改,这也是我们为什么要解构出setUserInfo的原因

到这里你可能很疑惑,我是用的setUserInfo呀?

但是看上面传入setUserInfo中的函数,传入函数是为了解决需要用到之前的state值的需求,这个pre就是之前的 state,可是在这个函数中,却直接使用了pre.account = e.target.value这样的形式,用 = 给一个 state 赋值了!

既要获取之前的state值,又不能在原先的state对象上面直接修改,所以我们使用深拷贝这个方法,生成一个临时对象,在这个上面修改,然后通过setUserInfo更改state:

 const handleInput = (e, type) => {
   let temp = JSON.parse(JSON.stringify(userInfo)); // 深拷贝对象
   if (type === "account") {
     temp.account = e.target.value;
   } else {
     temp.password = e.target.value;
   }
   setUserInfo(temp);
 };
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沧州刺史

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值