0

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

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

4

2 回答 2

2

在 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>
    )
}
于 2020-06-01T13:20:22.597 回答
1

您还没有添加React 推荐的onChange功能input，使其成为受控组件。具有受控输入的优点是您在整个 React 组件中都可以使用该值，并且您不需要在输入上触发事件或访问 DOM 来获取该值。

如果您不想创建受控组件，您可以这样做：

<input type="text" defaultValue={user.name} name="name" />

使用defaultValue而不是value. 因为在 React 渲染生命周期中，表单元素的 value 属性会覆盖 DOM 中的 value。有了这个，你希望 React 指定初始值，但让后续更新不受控制，从而创建一个不受控制的组件。

如果您创建一个受控组件，则必须指定一个函数来处理更改并将其设置为@Vaibhav 以下答案指定的状态：https ://stackoverflow.com/a/62133180/4207394

于 2020-06-01T13:27:20.750 回答