在 React 中使用条件渲染处理编辑

Question

我试图有条件地渲染按钮和带有反应的编辑表单。我的代码背后的想法是，单击编辑按钮后，编辑和删除按钮将更改为保存和取消，最初由 get 方法填充的 h5(标题(字段更改为具有原始默认值的文本区域。我认为这可能是一个不错的方法，但我大错特错了。

const Users = () => {
const [users, setUsers] = useState({ list: [] });
const [edit, setEdit] = useState(false);
useEffect(() => {
axios
.get('/api/User')
.then(response => {
setUsers({list:response.data});
})
.catch(error => {
console.log(error);
})
}, []);
const handleDelete = (user) => {
axios
.delete(`/api/User/${user.id}`)
.then(response => {
console.log(response)
window.location.reload(true);
})
.catch(error => {
console.log(error)
})
}
const handleEdit = (user) => {       
setEdit(true);
return (
<div className="section" key={user.id}>
<div className="divider"></div>
<textarea type="username" className="edit-userName" defaultValue={user.username}></textarea>
<textarea type="email" className="edit-userName" defaultValue={user.email}></textarea>
<Button className="btn-save" color="info" onClick={() => handleSave(user)}>Save</Button>
<Button className="btn-cancel" color="info" onClick={() => setEdit(false)}>Cancel</Button>
</div>
)
}
const handleSave = (user) => {
axios
.put(`/api/User/${user.id}`)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
setEdit(false);
}
return(
<div className="container white">
<h3 className="center"> 
Manage Users
<Button className="btn-createUser" color="info">
<Link to='/signup'>New User</Link>
</Button>
</h3>        
{users.list.map(user => (
<div className="section" key={user.id}>
<div className="divider"></div>
<h5 type='username' className="user-userName">{user.username}</h5>
<h5 type='email' className="user-userEmail">{user.email}</h5>
<Button className="btn-edit" color="info" onClick={() => handleEdit(user)}>Edit</Button>
<Button className="btn-delete" color="info" onClick={() => handleDelete(user)}>Delete</Button>
</div>
))}
</div>
);
}
export default Users;

跟进：我让渲染将标题更改为文本区域，并且放置现在正确到达端点，但是渲染将打开所有字段，而不仅仅是我按编辑的字段。

{users.list.map(user => (
<div className="section" key={user.id}>
<div className="divider"></div>
<h5 type='username' className="user-userName">{user.username}</h5>
<h5 type='email' className="user-userEmail">{user.email}</h5>
{edit ? (
<>
<textarea type="username" className="edit-userName" defaultValue={user.username}></textarea>
<textarea type="email" className="edit-userName" defaultValue={user.email}></textarea>
<Button className="btn-save" color="info" onClick={() => handleSave(user)}>Save</Button>
<Button className="btn-cancel" color="info" onClick={() => setEdit(false)}>Cancel</Button>
</>
) : (
<>
<Button className="btn-edit" color="info" onClick={() => handleEdit(user.id)}>Edit</Button>
<Button className="btn-delete" color="info" onClick={() => handleDelete(user.id)}>Delete</Button>
</>
)}
</div>
))}
</div>

Answer 1

查看条件渲染文档。我猜你有，但你只是没有完全正确实现它。

您可以在单击"编辑"时设置状态，这看起来像您正在执行的操作。然后，您可以使用文档中的Inline If with Logical && Operator方法为每个选项提供两行代码，并且只有一个按钮将呈现。这将进入div 内的 .jsx，其中一个按钮的类名divider(而不是<Button ...>Save</Button>(：

{!edit && <Button ...>Save</Button>}
{edit && <Button ...>Edit</Button>}

或者更简单地说：

{edit ? (<Button ...>Edit</Button>) : (<Button ...>Save</Button>)}

您还可以使用我链接的文档中的第一个示例，该示例使另一个组件看起来像这样(在您的Users功能组件之外！

// Put all your logic here to figure out what to render
function SaveButton(props) {
if (props.edit) {
return <Button ...>Edit</Button>;
} else {
return <Button ...>Save</Button>;
}
}

然后在功能组件中：

<SaveButton edit={edit} />

希望这可以帮助您了解如何有条件地渲染。

编辑到您的编辑：

要使其仅应用于一个用户，您的编辑状态需要更具体。您可以将其设置为数组或对象。例如：

const [edit, setEdit] = useState({}); // No one is being edited

然后，当单击编辑时，您可以使用键：值对设置编辑，该键：值对通过setEdit({...edit, [user.id]: true})解析为真实

这将使它充满{55: true, 68: true}(正在编辑两个用户 ID(。点差运算符...edit是这样您就不会丢失任何其他正在编辑的 ID。

如果要还原(编辑完成(，请删除该属性或将其设置为 false。

现在，在您决定呈现 HTML 的行中：

`{edit ? (` 

将其更改为：

`{edit[user.id] ? (`

这将使每个映射的资源检查编辑状态对象是否具有与其 ID 相等的 truthy 属性。