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

Question

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

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;

Answer 1

如果你想编辑信息，你应该做的是提供一个 edit form 和 users 预填充 fields.Here 是我为你创建的非常简单的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 中的方法处理，以使用新的 data.Once 更新状态用户单击 update 按钮有一个 handleSubmit 方法，由 onSubmit event listener 从 form JSX tag 调用。对于数据，我还没有创建一个完整的表格，所有数据都来自 jsonplaceholder server 例如 purposes.

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

这是沙盒 link : https://codesandbox.io/s/blissful-dirac-rboiy

希望对您有所帮助

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

Need to have the user be able to edit profile with an edit button

javascript

edit

button

reactjs