Question

我已经创建了一个网站，在箭头按钮上单击一次，您可以在这里看到：https://konekto-k77ov6y5p.now.sh/emergency_details。

但是，永远不会显示“其他按钮”（标记为{/ * 1 * /}）。您知道为什么会这样吗？我已经在很多位置上进行过尝试（标有{/ * 2 * /}等），但没有一个起作用。

import React from 'react';
import { Grid, IconButton, Button, Typography } from '@material-ui/core';
import ArrowForward from '@material-ui/icons/ArrowForward';
import { withStyles } from '@material-ui/core/styles';
import RadioButtonGroup from '../SOS/RadioButtonGroup';
import RadioButton from '../SOS/RadioButton';

const styles = theme => ({
  container: {
    alignItems: 'center',
    // background: 'white',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '80px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  },
  item: {
    // background: 'red',
    width: '100%',
    //background: 'white',
    'text-align': 'center',
    'border-radius': '5px',
    'margin-top': '10px'
  },
  label: {
    // background: 'white'
  }
  // forwardbutton: {
  //   'text-align': 'right'
  // }
});

class AffectedState extends React.Component {
  //const classes = styles; //React HOOK API => looks nice
  constructor(props) {
    super(props);
    //const { classes } = props;
    this.classes = props.classes;
  }
  //TODO: Add more kinds of injuries and possibly a text box
  render() {
    return (
      <Grid
        container
        className={this.props.classes.container}
        direction="column"
        spacing={2}
      >
        <Grid item sm={12} className={this.props.classes.item}>
          <Typography>
            {' '}
            The emergency information has been sent to incoming response teams.
            You can help them by providing more information.{' '}
          </Typography>
          <br />

          <Typography variant="h5">What happened?</Typography>
          {/* 1*/}
          <Button label="Other" onClick={this.props.handleOther} />
        </Grid>
        {/* 2*/}
        <Grid item sm={12} className={this.props.classes.item}>
          {/* 3*/}
          <RadioButtonGroup>
            <RadioButton name="AffectedState" value="1" label="Cannot move" />
            <RadioButton
              name="AffectedState"
              value="2"
              label="Intensive bleeding"
            />
            <RadioButton name="AffectedState" value="3" label="Life at stake" />
            <RadioButton name="AffectedState" value="4" label="Frostbite" />
          </RadioButtonGroup>
          {/* 4*/}
          <Grid />
          {/* 5*/}
          <Grid
            item
            sm={12}
            className={
              (this.props.classes.item, this.props.classes.forwardbutton)
            }
          >
            {/* 6*/}
            <IconButton
              edge="start"
              // className={classes.forwardbutton}
              color="black"
              //TODO can we change color and move it to right?
              onClick={this.props.handleComponentType}
            >
              <ArrowForward />
            </IconButton>
            {/* 7*/}
          </Grid>
          {/* 8*/}
        </Grid>
        {/* 9*/}
      </Grid>
    );
  }
}

export default withStyles(styles)(AffectedState);

谢谢您的帮助！

Answer 1

按钮已显示，但为空。

material-ui上的Button实现要求您将内容放在Button组件上，而不传递label道具。

请参见https://material-ui.com/components/buttons/

反应：按钮未显示在屏幕上

1 个答案: