Как отобразить другой компонент после нажатия кнопки с помощью React-Hooks? - PullRequest
Новая
       33

Как отобразить другой компонент после нажатия кнопки с помощью React-Hooks?

1 голос
/ 30 апреля 2019

У меня есть простое приложение 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 Ответ

1 голос
/ 30 апреля 2019

Вам не хватает закрывающего тега на кнопке модификации и закрывающего }} в вашем событии 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>;

РЕДАКТИРОВАТЬ: Да, там оно ниже.Тем не менее, это было не в том месте, так как у вас была переменная modifyForm внутри переменной modifyBtn.Это должно быть выше.Если вы хотите иметь <button>Log</button> внутри modifyBtn, это можно сделать, но оно не было действительным, как было.

...