在按钮单击事件上渲染 React 组件答案

【问题标题】：Render React Component on Button Click Event在按钮单击事件上渲染 React 组件
【发布时间】：2018-10-22 23:06:44
【问题描述】：

我有一个包含两个文本和一个 div 的极简登陆页面，其中包含两个按钮。单击其中一个按钮时，我想渲染 App 组件。

这是我迄今为止尝试过的：

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

export default class Landing extends React.Component {

constructor(){
    super();
}

launchMainWithoutProps = () => {
    return (<App />)
};

showAppMain =() => {
    console.log('Silk board clicked');
    this.launchMainWithoutProps();
};   

render() {
    return (
        <div className='landing'>
            <div className="centered">
                <div className="introText">
                    <h3>Welcome to KahanATM</h3>
                    <h5>A Simple Web App with React to find ATMs closest to you (3km radius) or from Silk Board Flyover</h5>
                </div>

                <div className="buttonsLayout">

                    <button
                        className='getLocation'
                        onClick={this.showAppMainWithLocation}>
                        Get My Location
                    </button>

                    <button
                        className='silkBoard'
                        onClick={this.showAppMain}>
                        Central Silk Board
                    </button>
                </div>
            </div>
        </div>
    );
}

}

但是当点击按钮时，只有日志显示在控制台中。无论有没有react-router，我怎么能做到这一点，因为我认为这太小而无法实现路由。谢谢。

【问题讨论】：

回顾您的历史，我发现您没有将一个答案标记为正确！你应该回馈那些帮助你的人。如果您点击答案左侧投票下的绿色复选标记，它将奖励他们 15 点声望，2 点您自己的声望，并让未来的访问者知道该问题已得到回答。见What should I do when someone answers my question?
是的，但是大多数答案都没有解决问题。回馈对我来说不是问题，它必须得到。你不这么认为吗？
好的，那没问题。不要忘记，如果您最终自己解决了问题，您可以随时为自己的问题提供答案（尽管您必须等待 2 天才能接受它）。当其他人有类似问题时，他们可以查看问题，看到明确的答案，并可能通过投票奖励您。
谢谢，你让我再次相信社区

标签： javascript reactjs buttonclick

【解决方案1】：

在您所在的州使用布尔标志。当您单击并执行 showAppMain 时，将您的状态变量设置为 true，这会导致您的渲染函数返回 <App />：

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

export default class Landing extends React.Component {

    constructor() {
        super();

        this.state = {
            shouldShowMain: false,
        };

        this.showAppMain = this.showAppMain.bind(this);
    }

    showAppMain() {
        console.log('Silk board clicked');
        this.setState({shouldShowMain: true});
    };   

    render() {
        if (this.state.shouldShowMain) {
            return (<App />);
        }

        return (
            <div className='landing'>
                <div className="centered">
                    <div className="introText">
                        <h3>Welcome to KahanATM</h3>
                        <h5>A Simple Web App with React to find ATMs closest to you (3km radius) or from Silk Board Flyover</h5>
                    </div>

                    <div className="buttonsLayout">

                        <button
                            className='getLocation'
                            onClick={this.showAppMainWithLocation}>
                            Get My Location
                        </button>

                        <button
                            className='silkBoard'
                            onClick={this.showAppMain}>
                            Central Silk Board
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}

【讨论】：