想要在点击按钮后向页面显示内容

Question

我希望能够点击4个按钮，并显示与其连接的内容。我正在玩onClick，看看我能得到什么。我有一个组件，它可以呈现我需要的3个其他组件，以便在单击按钮后显示内容。我想知道最好的方法是什么。我已经设置了onClickEvent函数并将其传递给我的EyewearContent组件。

这是我的App.js：

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import eyewearData from "./data/eyewear.json";
import Header from "./components/Header";
import EyewearContent from "./components/EyewearContent";
import Buy from "./components/Buy";
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      eyewearData: eyewearData,
      isHidden: true
    }
  }

  onClickEvent(e) {
    e.preventDefault();

    if (this.state.eyewearData.eyewear.id) {
      return <div>{this.state.eyewearData.eyewear.name}</div>;
    }
  };

  render() {
    return (
      <BrowserRouter>
        <div>
          <Header />
                <Route exact path="/" render={() => <EyewearContent eyewearData={this.state.eyewearData} handlePick={this.state.handlePick} />} />
                <Route exact path="/buy" component={Buy} />
            </div>
        </BrowserRouter>
    );
  }
}

export default App;

这是我的EyewearContent文件：

import React from "react";
import EyewearDescription from "./EyewearDescription";
import EyewearPurchaseBtn from "./EyewearPurchaseBtn";
import SelectEyewear from "./SelectEyewear";

const EyewearContent = (props) => (
    <div>
        <div className="eyewear-title-img">
            Glasses title and img go here
        </div>

        <div className="eyewear-title-info">

        </div>

        <EyewearDescription />
        <EyewearPurchaseBtn />
        <SelectEyewear eyewearData={props.eyewearData} handlePick={props.handlePick}/>
    </div>
);

export default EyewearContent;

这是我的SelectEyewear文件，其中有我的按钮：

import React from "react";

const SelectEyeWear = (props) => (
    <div className="select-eyewear-content">
        {
            props.eyewearData.eyewear.map( (data) => ( 
                <button key={data.id} onClick={props.handlePick}>
                    <div className="select-eyewear-img"> 
                        <img src={data.images["frontal-sm"]} alt={data.name}/> 
                    </div>
                    <div className="select-eyewear-title"> {data.brand} </div> 
                    <div className="select-eyewear-price"> {data.name}</div>
                </button>
            )) 
        }
    </div>
);

export default SelectEyeWear;