Question

我有一个简单的登录表单组件，当我单击该组件时，希望该表单消失并仅显示我的json。我对使用react状态感到有些生疏，并且似乎产生了与我尝试的相反的效果。当我单击按钮事件时，我正在显示的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>
        )}}

最终卡组件

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并想“隐藏”元素，但我知道这与react不正确。任何帮助将不胜感激。

Answer 1

根据Cards的真假值，有条件地渲染Signup或requestedPostsThatWeGotFromGecko。

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状态变量在“注册”表单和“卡”之间进行切换。

因此您可以在index.jsx中执行以下操作：

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

Answer 4

您要做的就是根据标志SignUp有条件地渲染requestedPostsThatWeGotFromGecko页面。

注意：重要的是，您必须使用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>
  );
}

相反的反应组件状态更改

4 个答案: