[英]How to display different component after button click using React-Hooks?
I have a simple CRUD application now.我现在有一个简单的 CRUD 应用程序。 I want my application to be able to modify and delete after a search.
我希望我的应用程序能够在搜索后修改和删除。 Meaning that the user have to search for the item, then only can modify or delete it.
这意味着用户必须搜索该项目,然后才能修改或删除它。 I have the search function ready and worked, however I'm struggle with display the Modification Form after the
Modify
button clicked.我已经准备好搜索功能并开始工作,但是我很难在单击“
Modify
按钮后显示“修改表单”。
I have tried searching around the internets and read about using states to toggle however I'm using React-Hooks and I have no idea how to implement that to useState
.我尝试在互联网上搜索并阅读有关使用状态切换的信息,但是我使用的是 React-Hooks,我不知道如何将其实现到
useState
。
Here is my current code, I tried to testing with a button within the modifyForm
but it won't show up after I click Modify
button.这是我当前的代码,我尝试使用
modifyForm
的按钮进行测试,但在单击“ Modify
按钮后它不会显示。 However, the modifyBtn
and deleteBtn
show up perfectly.但是,
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;
I have no idea why it won't show up in the modifyForm
because it did not return any error.我不知道为什么它不会出现在
modifyForm
因为它没有返回任何错误。 Or am I doing the entire thing wrong?还是我做错了整个事情? It should be in another way?
应该是另一种方式? Please help, thanks and deeply appreciates the reads :)
请帮助,感谢并深切感谢阅读:)
You are missing a closing tag on the modify button and the closing }}
on your onClick event.您缺少修改按钮上的结束标记和 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>;
EDIT: Yes, there it is below.编辑:是的,它在下面。 However, it was in the wrong place as you had the modifyForm variable inside the modifyBtn variable.
但是,它位于错误的位置,因为您在 modifyBtn 变量中有 modifyForm 变量。 It needs to be above.
它需要在上面。 If you want to have the
<button>Log</button>
inside the modifyBtn that can be done but it wasn't valid as it was.如果你想让
<button>Log</button>
包含在 modifyBtn 中,可以完成但它不是有效的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.