通过 Material UI ButtonGroup 增加和减少按钮

Question

我想用材质 ui ButtonGroup 创建一个递增/递减按钮。按钮起初就像这个图像。

当用户单击按钮时，ButtonGroup 的第二部分将显示（如下图所示）。

我怎样才能做到这一点？请帮忙。

提前致谢。

代码

import React from "react";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";

class GroupedButtons extends React.Component {
  state = { counter: 0 };

  handleIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };

  handleDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  };
  render() {
    const Btn = (
     <>
      <Button disabled>{this.state.counter}</Button>
      <Button onClick={this.handleDecrement}>-</Button>
     </>
    );

    return (
      <ButtonGroup size="small" aria-label="small outlined button group">
        <Button onClick={this.handleIncrement}>+</Button>
        {this.state.counter > 0 && Btn}
      </ButtonGroup>
    );
  }
}

export default GroupedButtons;

类似上面的代码。但它不起作用。

Answer 1

Material UIButtonGroup只需要Button孩子。你像个React.Fragment孩子一样过去。

您可以通过以下方式更改代码：

import React from "react";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";

class GroupedButtons extends React.Component {
  state = { counter: 0 };

  handleIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };

  handleDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  };
  render() {
    const displayCounter = this.state.counter > 0;

    return (
      <ButtonGroup size="small" aria-label="small outlined button group">
        <Button onClick={this.handleIncrement}>+</Button>
        {displayCounter && <Button disabled>{this.state.counter}</Button>}
        {displayCounter && <Button onClick={this.handleDecrement}>-</Button>}
      </ButtonGroup>
    );
  }
}

export default GroupedButtons;

在此处查看现场演示：