时间戳

首页 > 解决方案 > 从服务器获取后无法在 Reactjs 中编辑表单字段

reactjs - 从服务器获取后无法在 Reactjs 中编辑表单字段

问题描述

我在 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>
    )
}

相应的名称显示在此输入字段中，但不可编辑。如何解决问题？

标签： reactjsreact-forms

解决方案

在 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>
    )
}

推荐阅读