通过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

带钩子： 我使用 (product ['countInStock']) 作为库存数量的示例

const [counter, setCounter] = useState(0);
return (
   <ButtonGroup size="small" aria-label="small outlined button group">

        <Button disabled={counter >= product['countInStock']} onClick={()=> 
        {setCounter(counter+1)}}>+</Button>

     {<Button disabled>{counter}</Button>}

      {<Button disabled={counter <= 0} onClick={() => {
        setCounter(counter - 1)
        }}>-</Button>}

  </ButtonGroup>
)

Answer 2

材料UI ButtonGroup仅接受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;

在此处观看现场演示：