如何使用React-Hooks在按钮单击后显示不同的组件？

Question

我现在有一个简单的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中，因为它没有返回任何错误。或者我做错了所有的事情？它应该是另一种方式吗？请帮助，谢谢并深深感谢您的阅读:)

Answer 1

您缺少modify按钮的结束标记和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变量。它需要在上面。如果你想将<button>Log</button>放在modifyBtn中，那是可以做到的，但它并不是有效的。