React开发中如何从useState管理的状态对象内单独获取单个字段值

你当前的写法错误点在于：e是表单提交的事件对象，不存储表单字段值，你所有的表单输入值都已经统一存储在useState返回的values对象中，直接从该对象读取对应属性即可。

具体修改方法 #

你只需要修改handleFormSubmit函数中的打印语句，用values.mobile即可获取最新的手机号：

const handleFormSubmit = e =>{
    e.preventDefault();
    props.addOrEdit(values)
    // 从useState存储的values对象中直接读取mobile属性
    console.log(values.mobile);
}

扩展说明 #

如果需要读取其他单个字段值，都可以用values.字段名的方式获取：

• 读取姓名：values.fullName
• 读取邮箱：values.email
• 读取地址：values.address

原理是你在handleInputChange中已经做了统一的状态同步：每次输入触发事件时，都会把输入框name属性作为键，输入值作为值，更新到values对象中，所以values对象中永远存储着最新的全量表单数据，直接取对应属性即可。

内容的提问来源于stack exchange，提问作者Rakesh Shrestha