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

Posted 2023-03-08

【中文标题】使用 React-Hooks 单击按钮后如何显示不同的组件？

【英文标题】：How to display different component after button click using React-Hooks?

【发布时间】：2019-09-18 16:52:53

【问题描述】：

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

【参考方案1】：

您缺少修改按钮上的结束标记和 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>，可以这样做，但它不是有效的。

【讨论】：

有一个结束标签，就在modifyForm = <button>Log</button>;的正下方。

查看我的编辑。您将结束标签放在错误的位置（而不是完全丢失）。

我明白了，明白了，谢谢！我试图实现的是在用户单击modifyBtn 后，它会显示另一个表单让用户修改他们的数据。我怎样才能做到这一点？

谢谢。请将这个答案标记为正确，我建议在 SO 上提出一个新问题，因为这个问题有足够的答案。