需要让用户能够使用编辑按钮编辑个人资料答案

【问题标题】：Need to have the user be able to edit profile with an edit button需要让用户能够使用编辑按钮编辑个人资料
【发布时间】：2020-11-29 16:06:48
【问题描述】：

我正在做一个项目并创建一个网站。我现在正在开发的功能是用户的个人资料页面。我需要能够在页面中有一个编辑按钮，允许用户编辑他们的姓名、用户名、电子邮件和更新密码。以下是我拥有的代码，但我不确定如何使一切正常。

import React, {useEffect, useState} from "react";
import {useHistory} from "react-router-dom";
import axios from "axios";

const ProfilePage = () => {
    const [user, setUser] = useState({});
    const [sessionUrl,] = useState("/api/sessions/me");
    const history = useHistory();

    useEffect(() => {
         (async () => {
            try {
                const response = await axios.get(sessionUrl);
                setUser(response.data);
            } catch (err) {
                history.push({
                    pathname: "/account/login"
                });
            }
        })();
     }, []);

     return (
         <div>
             <div>Name: {user.displayName}</div>
             <div>Username: {user.username}</div>
             <div>Email: {user.email}</div>
         </div>
    );
 }

export default ProfilePage;

【问题讨论】：

标签： javascript reactjs button edit

【解决方案1】：

如果你想编辑信息，你应该做的是提供一个edit form 和users 预填充字段。这是我在 Codesandbox 中为你创建的非常简单的东西。

Input.js 用于输入字段组件

import React from "react";

export default ({ placeholder, type, value, handleInput, name }) => {
  return (
    <input
      type={type}
      name={name}
      value={value}
      onChange={handleInput}
      placeholder={placeholder}
    />
  );
};

对于EditForm component，我使用了来自http://jsonplaceholder.typicode.com/ 网站的一些虚假数据，以获取一些数据来填充表单。

在useEffect hook 中从http://jsonplaceholder.typicode.com/users/1 获取一些数据到fetch a single ressource to populate the following form

import React, { useState, useEffect } from "react";
import Input from "./Input";
import axios from "axios";
import "./styles.css";

const INITIAL_STATE = {
  id: 0,
  name: "",
  email: ""
};
export default function App() {
  const [user, setUser] = useState(INITIAL_STATE);
  useEffect(() => {
    (async () => {
      try {
        const user = await axios.get(
          "https://jsonplaceholder.typicode.com/users/1"
        );
        setUser(user.data);
      } catch (error) {
        console.log(error);
      }
    })();
  }, []);

  const handleInput = (e) => {
    console.log(e.target.name, " : ", e.target.value);
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      console.log("Data for update : ", user);
      const response = await axios.put(`https://yourendpoint/${user.id}`, user);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className="App">
      <h1>{user.name}</h1>
      <form onSubmit={handleSubmit}>
        <Input
          name="name"
          type="text"
          value={user.name}
          placeholder={"Your names"}
          handleInput={handleInput}
        />
        <br />
        <Input
          name="email"
          type="email"
          value={user.email}
          placeholder={"Your email"}
          handleInput={handleInput}
        />
        <br />
        <input type="submit" value="Update" />
      </form>
    </div>
  );
}

input fields 更改onChange listener 由父组件组件EditForm 中的方法处理，以使用新数据更新状态。一旦用户单击update 按钮，就会调用handleSubmit 方法来自form JSX tag 的onSubmit event listener。对于数据，我没有创建一个完整的表格，所有数据都来自jsonplaceholder server，例如purposes。

对于提交操作，您只需使用您正在使用的任何 ajax 库调用 put 方法。

这里是沙盒链接：https://codesandbox.io/s/blissful-dirac-rboiy

希望对你有帮助

【讨论】：