对面反应组件 state 变化

Question

我有一个简单的登录表单组件，当我单击它时，希望表单消失并且只显示我的 json。 我对使用 react state 有点生疏，并且似乎与我正在尝试的效果相反。 当我单击按钮事件时，我正在显示的 json 将切换出现和消失，但表单保持 static。 我需要表单消失并用我的网格填充页面。

这是我的组件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>
        )}}

最终卡组件

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>
        );
    }
}

我很确定在按下按钮后，我在沿线某处错误地设置了 state。 我正在考虑 jquery 并想“隐藏”该元素，但我知道反应不正确。 任何帮助是极大的赞赏。

Answer 1

根据requestedPostsThatWeGotFromGecko的真/假值有条件地呈现Cards或Signup 。

render() {
  const { requestedPostsThatWeGotFromGecko } = this.state;
  return (
    <div className="gecko">
      {requestedPostsThatWeGotFromGecko ? (
        <Cards />
      ) : (
        <SignUp login={() => this.clickMe()} />
      )}
    </div>
  );
}

Answer 2

可能这就是你想要的：

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

Answer 3

如果我理解正确，您想根据requestedPostsThatWeGotFromGecko state 变量在注册表单和卡片之间切换。

所以你可以在你的index.jsx中做这样的事情：

render() {
  return (
    <div className='gecko'>
      {this.state.requestedPostsThatWeGotFromGecko ?
        <Cards /> :
        <SignUp login={() => this.clickMe()} />
      }
    </div>
  );
}

Answer 4

您所要做的就是根据标志requestedPostsThatWeGotFromGecko有条件地呈现SignUp页面。

注意：重要的是您必须使用 false 对其进行初始化，并在从SignUp页面单击时使其为 true。

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>
  );
}