Question

当我在App.js的“渲染功能”中使用OnClick单击按钮时，我试图显示不同的组件。

我想在单击按钮时显示某个组件，它隐藏了其他组件。

这是我想做的事的一个例子

console.log(obj.textVal)

Answer 1

import React from "react";

import { Button, View } from "react-native";
import styles from "./App.module.css";
import {View} from 'react-native'

import image from "./images/covid1.png";

class App extends React.Component {
  constructor(props){
      super(props);
      state = {

        CityButton: false,
        StateButton: false,
        CountryButton: false
      };
  }

  render() {

    { CountryButton, StateButton, CityButton } = this.state;

    return (
   <view>
      <div className={styles.container}>
        <img className={styles.image} src={image} alt="COVID-19" />

        <Button title="Country Mode" onPress={() => 
           this.setState({CountryButton: true}
           )} />

        <Button title="State Mode" onPress={() => 
           this.setState({StateButton: true}
           )} />

        <Button title="County Mode" onPress={() => 
           this.setState({CityButton: true}
           )} />

        {CountryButton && <div> Hello </div>}

        {StateButton && <div> Hello </div>}

        {CityButton && <div> Hello </div>}
      </div>
</view>
    );
  }
}

export default App;

Answer 2

import React from 'react';
import logo from './logo.svg';
import './App.css';




function Statepicker(){
  return(
    <div>Statepicker</div>
  )
}

function Statecards(){
  return(
    <div>Statecards</div>
  )
}

function Countrypicker(){
  return(
    <div>Countrypicker</div>
  )
}

function Countrycards(){
  return(
    <div>Countrycards</div>
  )
}

class ThemeProvider extends React.Component{
  
  constructor(props){
     super(props);
     this.state={country:true,states:false}
     
  }

  renderCountryOrState=()=>{
    if(this.state.states){
      return(<React.Fragment>
        <Statepicker/>
        <Statecards/>
      </React.Fragment>)
    }
    return (
      <React.Fragment>
        <Countrypicker/>
        <Countrycards/>
      </React.Fragment>
    )
  }

  render(){
    return(
       <div>
         <button onClick={(e)=>{this.setState({country:true,states:false})}}>Select country</button>
         <button onClick={(e)=>{this.setState({country:false,states:true})}}>Select state</button>
         {this.renderCountryOrState()}
       </div>
    )
  }

}


function App() {
  return (
    <ThemeProvider/>
  );
}

export default App;

单击一页上的按钮时如何显示不同的组件？

2 个答案: