У меня есть простой компонент формы входа, который, когда я нажимаю, хотел бы, чтобы форма исчезла и отображала только мой json. Я немного устарел от работы с состоянием реакции и, похоже, имею эффект, противоположный тому, что я пытаюсь. Когда я нажимаю на свое событие кнопки, json, который я показываю, будет переключаться между появлением и исчезновением, но форма остается статичной. Мне нужно, чтобы форма исчезла, а на странице появилась моя сетка.

Вот мои компоненты index.jsx

import React from 'react';
import SignUp from '../SignUp';
import Cards from '../Articles/Cards';

export default class Gecko extends React.Component {
    constructor(props) {
        super(props);
        this.state = { requestedPostsThatWeGotFromGecko: null,  }
        this.clickMe = this.clickMe.bind(this)
  }

    
    clickMe = () => {
        const {requestedPostsThatWeGotFromGecko} = this.state;
        this.setState({ requestedPostsThatWeGotFromGecko: !requestedPostsThatWeGotFromGecko })
    }
    render() {
        console.log(this.state);
        return (
            <div className='gecko'>
                <SignUp login={() => this.clickMe()}/>
                {this.state.requestedPostsThatWeGotFromGecko &&
                    <Cards />
                }
            </div>
        );
    }
}

Компонент регистрации

import React from 'react';

export default class SignUp extends React.Component {

    render() {
        const onClick = () => {
            this.props.login();
            console.log('rich');
        }
        return (
            <div className='sign-up'>
                <table className='sign-up-form'>
                    <tbody>
                    <div class="gecko-signup__tabs"><button id="gecko-signup" data-selected="yes">Sign Up</button><button id="gecko-login" data-selected="">Log In</button></div>
                        <tr>
                            <td>
                                <p id="signUpFree">Sign Up for Free</p>
                            </td>
                        </tr>
                        <div id="inputs-section">
                            <tr>
                                <td><input id="first" placeholder="First Name*" /></td>
                                <td><input id="last" placeholder="Last Name*" /></td>
                            </tr>
                        </div>
                        <tr>
                            <td colSpan="2"><input placeholder="Email Address*" /></td>
                        </tr>
                        <tr>
                            <td colSpan="2"><input placeholder="Set A Password*" /></td>
                        </tr>
                        <tr>
                            <td colSpan="2"><input id="getStarted" type="submit" value="Get Started" onClick={onClick}/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }
}

Компонент CardSetup

import React from 'react';
import SignUp from '../SignUp';


export default class Articles extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            requestedPostsThatWeGotFromGecko: [],
        }
    }
    
    componentDidMount(){
        const api = 'https://5d445466d823c30014771642.mockapi.io/api/v1/products';
        const request = new Request(api);
        // Fetch isn't browser compatible...Might should fix.
        fetch(request)
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                } else {
                    throw new Error('Something went wrong on api server!');
                };
            }).then(response => {
                 
                this.setState({
                    requestedPostsThatWeGotFromGecko: response
                });
                
            })
            .catch(error => {
                console.error(error);
            });
    }

    render() {
        return(
            <div className='articles'>
                
                {this.state.requestedPostsThatWeGotFromGecko.map(product => {
                    return (
                        <div className='flex-grid'>
                            <div className="card">
                                    <div className="overflow">
                                        <img className='productImage' src={product.image}></img>
                                    </div>
                                    <div className='card-body'>
                                        <p id='name'>{product.name}</p>
                                        <p id='description'>{product.description}</p>
                                        <p id='price'>{product.price} </p>
                                    </div>
                            
                            </div>
                        </div>
    );
    })
}
</div>
        )}}

Компонент Final Cards

import React from 'react';
import Articles from './CardSetup';

export default class Cards extends React.Component {

    render() {
        return(
            
            <div className="cards">
                <h2>Products</h2>
                    <div className="column">
                        <Articles />
                    </div>
                    <div className="column">
                        <Articles />
                    </div>
                    <div className="column">
                        <Articles />
                    </div>
                    <div className="column">
                        <Articles />
                </div>
            </div>
        );
    }
}

Я почти уверен, что я неправильно устанавливаю состояние где-то в строке после нажатия кнопки. Я думаю о jquery и хочу «скрыть» элемент, но знаю, что с реакцией это неправильно. Любая помощь приветствуется.

1
guycode 19 Авг 2020 в 08:40

4 ответа

Лучший ответ

Условно визуализировать Cards или Signup на основе истинного / ложного значения requestedPostsThatWeGotFromGecko.

render() {
  const { requestedPostsThatWeGotFromGecko } = this.state;
  return (
    <div className="gecko">
      {requestedPostsThatWeGotFromGecko ? (
        <Cards />
      ) : (
        <SignUp login={() => this.clickMe()} />
      )}
    </div>
  );
}
1
Drew Reese 19 Авг 2020 в 05:47

Все, что вам нужно сделать, это условно отобразить страницу SignUp на основе флага requestedPostsThatWeGotFromGecko.

Примечание. Важно то, что вы должны инициализировать его с помощью false и сделать его истинным при щелчке на странице SignUp.

constructor(props) {
    super(props);
    this.state = { requestedPostsThatWeGotFromGecko: false };
    this.clickMe = this.clickMe.bind(this)
}
   
render() {
const { requestedPostsThatWeGotFromGecko } = this.state;

return (
<div className="gecko">
  {requestedPostsThatWeGotFromGecko ? (
    <Cards />
  ) : (
    <SignUp login={() => this.setState({ requestedPostsThatWeGotFromGecko: true  })} />
  )}
</div>
  );
}
0
Awais Rafiq Chaudhry 19 Авг 2020 в 13:24

Наверное, это то, что вы хотите:

    render() {
        return (
            <div className='gecko'>
                {!this.state.requestedPostsThatWeGotFromGecko &&
                    <SignUp login={() => this.clickMe()}/>
                }
                {this.state.requestedPostsThatWeGotFromGecko &&
                    <Cards />
                }
            </div>
        );
    }
0
see sharper 19 Авг 2020 в 05:47

Если я правильно понял, вы хотите переключаться между формой регистрации и карточками на основе переменной состояния requestedPostsThatWeGotFromGecko.

Итак, вы можете сделать что-то вроде этого в своем index.jsx:

render() {
  return (
    <div className='gecko'>
      {this.state.requestedPostsThatWeGotFromGecko ?
        <Cards /> :
        <SignUp login={() => this.clickMe()} />
      }
    </div>
  );
}
0
Kanishka Malhotra 19 Авг 2020 в 05:51