Question

我正在使用axios来获取和发布用户信息，但是我对如何处理编辑用户信息有些迷茫。我已经创建了一个可工作的put端点，但是我对如何在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>
 );

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

Answer 2

您需要首先将userName和userEmail设置为状态。 onChange方法将捕获新的更新。

<input
       type="text"
       name="username"
       value={this.state.username}
       onChange={this.handleChange}
     /> 
handleChange = event => {
   this.setState({ username: event.target.value });
};

在React中编辑用户信息

2 个答案: