如何在使用 React-Hooks 单击按钮后显示不同的组件?
How to display different component after button click using React-Hooks?
我现在有一个简单的 CRUD 应用程序。我希望我的应用程序能够在搜索后进行修改和删除。这意味着用户必须搜索该项目,然后才能修改或删除它。我已经准备好并可以使用搜索功能,但是我很难在单击 Modify
按钮后显示修改表单。
我尝试在互联网上搜索并阅读有关使用状态切换的信息,但是我使用的是 React-Hooks,但我不知道如何将其实现 useState
。
这是我当前的代码,我尝试使用 modifyForm
中的按钮进行测试,但在我单击 Modify
按钮后它不会显示。但是,modifyBtn
和 deleteBtn
完美显示。
import React, {useState} from 'react'
import {useQuery, useMutation} from 'react-apollo-hooks';
import {searchUserQ, editUserQ, deleteUserQ} from '../queries/queries';
let cycle = 0;
const SearchUserForm = () => {
//Search User Query
const [name, setName] = useState('');
const { data, error, loading } = useQuery(searchUserQ, {
variables: { name }
});
let content;
let sName;
let modifyBtn, deleteBtn;
let modifyForm, deleteForm;
//If no user was found
if (cycle > 0){
if (data.user === null) { content = 'User Not Found' };
}
//If user was found
if (data.user !== undefined && data.user !== null) {
if (loading) { content = 'Loading User...' };
if (error) { content = `Error Occur: ${error}` };
const user = data.user;
content = `Username: ${ user.name } ID: ${ user.id }`;
//Display Modify Button and Delete Button after search result
modifyBtn = <button onClick={ (event) => {
event.preventDefault();
//Display Modify Form
modifyForm = <button>Log</button>;
}}>Modify</button>;
deleteBtn = <button>Delete</button>;
}
//Return On Front End
return (
<div id="edit-user">
<div className="field">
<label htmlFor="name">Search UserName</label>
<input type="text" id="name" onChange={(event) => {
sName = event.target.value;
}}/>
<button onClick={(event) => {
setName(sName);
cycle++;
}} value={name}>
Search
</button>
</div>
<div>
<p>{ content }</p>
</div>
<div>
{ modifyBtn }
{ deleteBtn }
</div>
<div>
{ modifyForm }
</div>
<div>
{ deleteForm }
</div>
</div>
)
};
export default SearchUserForm;
我不知道为什么它不会出现在 modifyForm
中,因为它没有 return 任何错误。还是我做错了整件事?它应该以另一种方式?请帮助,感谢并非常感谢阅读:)
您缺少修改按钮上的结束标记和 onClick 事件上的结束 }}
。
//Display Modify Button and Delete Button after search result
modifyBtn = <button onClick={ (event) => {
event.preventDefault();
}}> Button </button> // <-- correct place closing tags here.
//Display Modify Form
modifyForm = <button>Log</button>;
deleteBtn = <button>Delete</button>;
编辑:是的,它在下面。但是,它位于错误的位置,因为您在 modifyBtn 变量中有 modifyForm 变量。它需要在上面。如果您想在可以完成的 modifyBtn 中使用 <button>Log</button>
,但它不是有效的。
我现在有一个简单的 CRUD 应用程序。我希望我的应用程序能够在搜索后进行修改和删除。这意味着用户必须搜索该项目,然后才能修改或删除它。我已经准备好并可以使用搜索功能,但是我很难在单击 Modify
按钮后显示修改表单。
我尝试在互联网上搜索并阅读有关使用状态切换的信息,但是我使用的是 React-Hooks,但我不知道如何将其实现 useState
。
这是我当前的代码,我尝试使用 modifyForm
中的按钮进行测试,但在我单击 Modify
按钮后它不会显示。但是,modifyBtn
和 deleteBtn
完美显示。
import React, {useState} from 'react'
import {useQuery, useMutation} from 'react-apollo-hooks';
import {searchUserQ, editUserQ, deleteUserQ} from '../queries/queries';
let cycle = 0;
const SearchUserForm = () => {
//Search User Query
const [name, setName] = useState('');
const { data, error, loading } = useQuery(searchUserQ, {
variables: { name }
});
let content;
let sName;
let modifyBtn, deleteBtn;
let modifyForm, deleteForm;
//If no user was found
if (cycle > 0){
if (data.user === null) { content = 'User Not Found' };
}
//If user was found
if (data.user !== undefined && data.user !== null) {
if (loading) { content = 'Loading User...' };
if (error) { content = `Error Occur: ${error}` };
const user = data.user;
content = `Username: ${ user.name } ID: ${ user.id }`;
//Display Modify Button and Delete Button after search result
modifyBtn = <button onClick={ (event) => {
event.preventDefault();
//Display Modify Form
modifyForm = <button>Log</button>;
}}>Modify</button>;
deleteBtn = <button>Delete</button>;
}
//Return On Front End
return (
<div id="edit-user">
<div className="field">
<label htmlFor="name">Search UserName</label>
<input type="text" id="name" onChange={(event) => {
sName = event.target.value;
}}/>
<button onClick={(event) => {
setName(sName);
cycle++;
}} value={name}>
Search
</button>
</div>
<div>
<p>{ content }</p>
</div>
<div>
{ modifyBtn }
{ deleteBtn }
</div>
<div>
{ modifyForm }
</div>
<div>
{ deleteForm }
</div>
</div>
)
};
export default SearchUserForm;
我不知道为什么它不会出现在 modifyForm
中,因为它没有 return 任何错误。还是我做错了整件事?它应该以另一种方式?请帮助,感谢并非常感谢阅读:)
您缺少修改按钮上的结束标记和 onClick 事件上的结束 }}
。
//Display Modify Button and Delete Button after search result
modifyBtn = <button onClick={ (event) => {
event.preventDefault();
}}> Button </button> // <-- correct place closing tags here.
//Display Modify Form
modifyForm = <button>Log</button>;
deleteBtn = <button>Delete</button>;
编辑:是的,它在下面。但是,它位于错误的位置,因为您在 modifyBtn 变量中有 modifyForm 变量。它需要在上面。如果您想在可以完成的 modifyBtn 中使用 <button>Log</button>
,但它不是有效的。