React单击按钮时显示按钮列表

如何解决React单击按钮时显示按钮列表

我从React开始，我正在制作一个简单的应用程序来练习，在这个应用程序中，我得到了具有以下代码的App.js：

import React,{useState} from 'react';
import { Box } from '@material-ui/core/';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import BotonInicial from './components/botonInicial'
import NumeroJugadores from './components/numeroJugadores'


function App() {

return (
  <Box color="text.primary" clone>
    <Container maxWidth="sm" style={{ textAlign: "center" }} >

      <Typography variant="h2" component="h2" style={{ color: "grey",verticalAlign: 
        "middle",padding: "10px" }}>
        Five Crowns Counter
      </Typography>

      <BotonInicial label={"Empieza el Juego!!"} />
      <br />
      <br />
      <NumeroJugadores visible="true"/>

    </Container>
  </Box>
);


 }

 export default App;

在两个不同的文件中，获得了“ BotonInicial”和“ NumeroJugadores”组件。

botonInicial.js

import React from 'react';
import {Button} from '@material-ui/core/';

function BotonInicial(params) {
      console.log(params)
      return (
      <Button 
        variant="contained" 
        color="secondary" 
        style= {{padding: "20px"}} 
        onClick={Change the state on the NumeroJugadores Component}
      >
      {params.label}
      </Button>
      );
  }
  
  export default BotonInicial;

numeroJugadores.js

import React from 'react';
import {ButtonGroup,Button} from '@material-ui/core/';


function NumeroJugadores(params) {
    if(params.visilble){
    return (
      <ButtonGroup variant="contained" color="primary" aria-label="contained primary button group" >
        <Button>1 P</Button>
        <Button>2 P</Button>
        <Button>3 P</Button>
        <Button>4 P</Button>
        <Button>5 P</Button>
        <Button>6 P</Button>
        <Button>7 P</Button>
    </ButtonGroup>
    );
    }else {return null;}
  
}
  
  export default NumeroJugadores;

我正在尝试此功能：当用户单击按钮时，“ NumeroJugadores”应该出现，更改了“ visible” = true的属性。我已经尝试过使用州和州Hook，但没有成功。我应该采用哪种方法？

解决方法

您可以使用react挂钩帮助有条件地显示/隐藏元素。

在您的App.js中（注意，我在NumeroJugadores中删除了visible =“ true”，我在BotonInicial中添加了handler参数，并使用visible添加了条件） / p>

带有visible的条件基本上意味着，如果visible为true，则呈现NumeroJugadores

function App() {
  const [visible,setVisible] = useState(false);
  const showButtons = () => setVisible(true);

  return (
    <Box color="text.primary" clone>
      <Container maxWidth="sm" style={{ textAlign: "center" }} >

        <Typography variant="h2" component="h2" style={{ color: "grey",verticalAlign: 
          "middle",padding: "10px" }}>
          Five Crowns Counter
        </Typography>

        <BotonInicial label={"Empieza el Juego!!"} handler={showButtons} />
        <br />
        <br />
        {!!visible && <NumeroJugadores />}

      </Container>
    </Box>
  );
}

对于您的BotonInicial，将handler传递到onClick

function BotonInicial(params) {
      console.log(params)
      return (
      <Button 
        variant="contained" 
        color="secondary" 
        style= {{padding: "20px"}} 
        onClick={params.handler}
      >
      {params.label}
      </Button>
      );
  }

然后您就可以清理NumeroJugadores，

function NumeroJugadores() {
    return (
      <ButtonGroup variant="contained" color="primary" aria-label="contained primary button group" >
        <Button>1 P</Button>
        <Button>2 P</Button>
        <Button>3 P</Button>
        <Button>4 P</Button>
        <Button>5 P</Button>
        <Button>6 P</Button>
        <Button>7 P</Button>
    </ButtonGroup>
    );
}