javascript - 从文档复制了material-ui中对话框的代码，但不起作用，我做错了什么？

Question

我复制了用于 react 的material-ui对话框功能的代码，但无法弄清楚为什么这根本不起作用。单击联系人按钮甚至不会导致它调用handleClickOpen 方法。

联系按钮是应该打开对话框的按钮，所有对话框代码都是从material-ui的文档中复制的，所以我不确定这怎么行不通。

export default function Banner() {
  const [open, setOpen] = React.useState(false);

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }
  const classes = useStyles();

  return (
    <Container maxWidth="lg">

      <div className={classes.root}>
        <Grid container spacing={7}>
          <Grid item lg={6} xs={12}>
            <div className={classes.title}>
              <Title content="Freightage Solutions" />
              <br />
              <SubTitle content="A lean, modern, and efficient shipping brokerage." />
              <div className={classes.buttons}>
                <Button ClassName={classes.button} content="Get Started" color='white' />
                <Button ClassName={classes.button} content="Contact Us" color='blue' onClick = {handleClickOpen} />
                <Dialog
                  open={open}
                  onClose={handleClose}
                  aria-labelledby="alert-dialog-title"
                  aria-describedby="alert-dialog-description"
                >
                  <DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
                  <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                      Let Google help apps determine location. This means sending anonymous location data to
                      Google, even when no apps are running.
                    </DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={handleClose} color="primary">
                      Disagree
                    </Button>
                    <Button onClick={handleClose} color="primary" autoFocus>
                      Agree
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
            </div>
          </Grid>
          <Grid item lg={6} xs={12}>
            <img src={Image} className={classes.image} />
          </Grid>
        </Grid>
      </div>
    </Container>
  );
}

编辑:这是我正在使用的自定义按钮组件

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { styled } from '@material-ui/styles';
import createBreakpoints from "@material-ui/core/styles/createBreakpoints";
import Button from "@material-ui/core/Button"

const breakpoints = createBreakpoints({});


const CustomButton = styled(Button)({
    border: '2px solid #FFFFFF',
    borderRadius: 80,
    height: 48,
    padding: '0 20px',
    textTransform: 'none',
    marginBottom: '20px',
    marginRight: '30px',
    marginLeft: '30px',
    [breakpoints.up("lg")]: {
        marginLeft: '0px',
    },
});

const BlueButton = styled(CustomButton)({
    background: '#0071F7',
    color: 'white',
    '&:hover': {
        background: 'white',
        color: '#0071F7',
    },
});

const WhiteButton = styled(CustomButton)({
    background: 'white',
    color: '#0071F7',
    '&:hover': {
        background: '#0071F7',
        color: 'white',
    }
});

const ButtonType = styled(Typography)({
    fontFamily: 'Ubuntu',
    fontWeight: 450,
});

export default class Title extends React.Component {
  render (){
    if(this.props.color == 'white'){
        return (
            <WhiteButton gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </WhiteButton>
        )
    } else{
        return(
            <BlueButton gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </BlueButton>
        )  
    }
  }
}

Answer 1

最好使用为 CustomButton 提供的 onClick-prop 并将其设置在按钮上。

export default class Title extends React.Component {
  render () {
    if(this.props.color == 'white'){
        return (
            <WhiteButton onClick={this.props.onClick} gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </WhiteButton>
        )
    } else{
        return(
            <BlueButton  onClick={this.props.onClick}  gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </BlueButton>
        )  
    }
  }

}