从服务器获取后，无法在Reactjs中编辑表单域
从服务器获取后，无法在Reactjs中编辑表单域
提问于 2020-06-01 13:12:48
我在Reactjs中有一个用户编辑页面，我在其中获取用户详细信息并将其填充到相应的输入字段中。问题是在获取和显示数据之后，我无法编辑字段。
我的代码是：
function EditProfile(props) {
const [user, setUser] = useState()
useEffect(() => {
const fetchUserInfo = async () => {
const profileConfig = {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + auth.token
}
};
fetch(`http://localhost:4000/api/v1/user/me`, profileConfig)
.then(response => response.json())
.then(response => {
console.log("response: ", response.user);
if (response.success === true) {
setUser(response.user)
} else {
alert(response.message)
}
},
(error) => {
alert('User fetching faied: ' + error)
})
}
fetchUserInfo()
}, [])
return (
<form>
<input type="text" value={user.name} name="name" />
</form>
)
}对应的名称将显示在此输入字段中，但不可编辑。如何解决这个问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-01 13:27:21
您尚未在input上添加React建议将其设置为controlled component的onChange函数。拥有受控输入的好处是，您可以在整个React组件中使用该值，并且不需要在输入时触发事件或访问DOM来获取该值。
如果你不想创建一个受控组件，你可以这样做：
<input type="text" defaultValue={user.name} name="name" />使用defaultValue而不是value。因为在React呈现生命周期中，表单元素上的value属性将覆盖DOM中的值。这样，您希望React指定初始值，但保留后续更新不受控制，从而创建一个uncontrolled component。
如果您创建一个受控组件，则必须指定一个函数来处理更改，并通过@Vaibhav：https://stackoverflow.com/a/62133180/4207394将其设置为如下答案所指定的状态
Stack Overflow用户
发布于 2020-06-01 13:20:23
在React中，受控组件需要值和更改处理程序。
function EditProfile(props) {
const [user, setUser] = useState({name: ''})
useEffect(() => {
/*
....
*/
}, [])
const handleChange = e => {
setUser({...user, name: e.target.value})
}
return (
<form>
<input type="text" onChange={handleChange} value={user.name} name="name" />
</form>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62133040
复制相关文章
![[MySQL] macOS 下安装MySQL后无法在系统配置中打开](https://ask.qcloudimg.com/http-save/yehe-2353021/tx8d1rq9yq.png)
点击加载更多
相似问题
无法在reactjs中编辑表单输入。
ReactJS无法从表单输入中获取值
提交后，ReactJS无法从表单中获得值
无法使用defaultValue在ReactJS上编辑表单
ReactJS:从表单获取数据
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
