摘要框根据项目数量变化出现并消失(React )

Question

当任何项目的数量超过0，包含有数量的产品的div时，我需要总摘要框div出现。如果数量为0，则项目的方框/div应消失。

我有一个类应用程序，有3个变量的项目数量，为3个不同的产品。

​

这是摘要框，它与项的值绑定在一起。

HD是HD无人机的数量

QHD .QHD无人机

蝙蝠是电池的数量。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
      HD: 0,
      QHD: 0,
      Bat: 0,
    };

    this.changeHD = this.changeHD.bind(this);
    this.changeQHD = this.changeQHD.bind(this);
    this.changeBat = this.changeBat.bind(this);
  }

数量摇杆按钮一侧的输入调用increaseHD，decreaseHD数量可以在输入框中编辑成任何非负数，并使用setstate来更改HD、QHD、Bat vars。

以下是ChangeHD的代码，称为任意产品输入的更改

changeHD = (e) => {
    let o = 0;
    o = parseInt(e.target.value);
    console.log(o);
    if (o < 0) {
    } else {
      this.setState({ HD: o });
    }
  };

Onclick调用的增减代码。

increaseHD = () => {
    this.setState({
      HD: this.state.HD + 1,
    });
  };
  decreaseHD = () => {
    let i = 0;
    i = this.state.HD;
    if (i == 0) {
    } else {
      this.setState({
        HD: this.state.HD - 1,
      });
    }
  };

例如，如果1080 appear从0增加到1，则会出现汇总框

​

摘要框的呈现代码(占位符)

<div className="sumbox">
              <div>Total Summary box</div>
              <div>HD camera, QTY = 1 Total = 833.99</div>
              <div>QHD camera, QTY = 1 Total = 895.31</div>
              <div>Batteries, QTY = 1 Total = 78.5</div>
            </div>

Answer 1

你可以在你的返回声明中添加这样的内容-

{this.state.HD >= 1?
  <TotalSummaryBox /> : <></>
   }

因此，只有当HD计数超过1时，才会呈现摘要框。