Почему один из моих компонентов не будет скрывать при помощи хуков? - PullRequest
Новая
       15

Почему один из моих компонентов не будет скрывать при помощи хуков?

2 голосов
/ 10 октября 2019

Я не могу понять, почему Spin Now не будет прятаться при нажатии на нее. Он по праву показывает Claim Now при нажатии Spin Now, но как только появляется Claim Now, я хочу, чтобы Spin Now скрылся. Я использую крючки, что я делаю не так? 

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';

const Buttons = () => {
    const [showSpin, setShowSpin] = useState(false);
    const [showClaim, setShowClaim] = useState(false);

    return(
        <div className="both-buttons">
            <SpinNowButton onClick={() => setShowClaim(true)}/>
            {showClaim ? <ClaimNowButton/> : null}
            {showSpin ? <SpinNowButton/> : null}
        </div>
    );
};

export default Buttons;

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Таким образом, вам нужен только один кусок состояния, чтобы выполнить это, и вы устанавливаете его в противоположность тому, что было ранее. Тогда приведенные ниже троичные компоненты будут отображать один компонент, если он истинный, и другой, если он ложный.


Редактировать - я думаю, это ближе к тому, что вы ищете: 

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';

const Buttons = () => {
    const [showClaim, setShowClaim] = useState(false);

    const handleCLick = () => {setShowClaim(!showClaim)}

    return(
        <div className="both-buttons">
            {showClaim ? null : <SpinNowButton onClick{() => handleClick()}/>}
            {showClaim ? <ClaimNowButton onClick{() => handleClick()}/> : null}
        </div>
    );
};

export default Buttons;
0 голосов
/ 10 октября 2019

Реализация, которая гибка в добавлении большего количества типов, таких как требование / вращение: 

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';

const Buttons = () => {
    const [shownItems, setShownItems] = useState(['spin']);

    return(
        <div className="both-buttons">
            {shownItems.contains('claim') && <ClaimNowButton onClick={() => setShownItems('spin')}/>}
            {shownItems.contains('spin') && <SpinNowButton onClick={() => setShownItems('claim')}/>}
        </div>
    );
};

export default Buttons;
...