reactjs - 在 React 中编辑用户信息

Question

我正在使用 axios 来获取和发布用户信息，但我对如何处理编辑用户信息有些迷茫。我已经创建了一个工作端点，但我不知道如何在 React 中更改为可编辑文本

用户组件：

const handleEdit = (user) => {

    axios
        .put(`/api/User/${user.id}`)
        .then(response => {
            console.log(response)
        })
        .catch(error => {
            console.log(error)
        })
}

 return(
     <div className="container white">
         <h3 className="center"> 
         User List
         <Button className="btn-createUser" color="info">
             <Link to='/signup'>Add New User</Link>
         </Button>
         </h3>          
        <form className="inline-form">
             {users.list.map(user => (
                 <div className="section" key={user.id}>
                 <div className="divider"></div>
                     <h5 className="user-userName">{user.username}</h5>
                     <h5 className="user-userEmail">{user.email}</h5>
                     <Button className="btn-delete" color="info" onClick={() => handleDelete(user)}>Delete</Button>
                     <Button className="btn-edit" color="info" onClick={() => handleEdit(user)}>Edit</Button>
                 </div>
             ))}
        </form>
     </div>
 );

标签： reactjsaxios

Answer 1

const [users] = useState([]); //declare users array at top then use setUsers to update


handleChange = event => {
   const index = users.findIndex(user => user.userName = event.target.value);
   users[index].userName =  event.target.value;
   setUsers(users);
}