Javascript 单击React中的特定组件按钮触发动画

我一直在使用动画翻转我的组件。下面是App.jsx。要翻转的组件是

：

从“React”导入React；
导入“/App.css”；
从“react flipy”导入flipy，{FrontSide，BackSide}；
从“/components/Calculator.jsx”导入计算器；
导出默认函数App（）{
返回(
（this.flippy=r）}//要像这样使用toggle方法。flippy.toggle（）
//若你们通过isFlipped道具组件将被控制组件。
//和其他道具，这些道具将被放到div中
style={{width:“400px”，height:“600px”}}///这些是可选的样式，没有必要
>
////  {
this.setState（{budget:this.state.budget+val}）；
};
handleEqual=（）=>{
this.setState（{budget:math.evaluate（this.state.budget）}）；
};
...
render（）{
返回(
4.
5.
6.
this.handlePoints（）}>
1.
2.
3.
this.handleVal（）}>
7.
8.
9
this.handleScheme（）}>
.
0
this.handleEqual（）}>=
this.handlePlayers（）}>
);
}
}
导出默认计算器；

如何仅在单击一个特定的计算器按钮（如“=”）时处理组件的翻转

---

这个链接给出了如何使用

{isFlipped}

一个

onClick={handleChange.bind（null，id）}

来处理这个点击的提示，但是我不知道如何做。

最简单的解决方案是将它变成一个受控组件：

function App() {
  const [isFlipped, setIsFlipped] = React.useState(false);
  
  const handleEqualPress = () => {
    setIsFlipped(true);
  }

  // we need to call this somewhere to flip the calculator back
  const flipBack = () => {
    setIsFlipped(false);
  }

  return (
      <Flippy
      isFlipped={isFlipped}
      flipDirection="horizontal" // horizontal or vertical
      style={{ width: "400px", height: "600px" }} /// these are optional style, it is not necessary
    >
      <FrontSide>
        // onEqualPress needed to know when we pressed equal
        <Calculator onEqualPress={handleEqualPress} /> //// <-------- component to be flipped
      </FrontSide>
      // Inside backside (where you wrote FIELD) add a handler for flipBack to flip the calculator back
      <BackSide style={{ backgroundColor: "#175852" }}>FIELD</BackSide>
    </Flippy>
  );
}

import React, { Component } from "react";
import "./Calculator.css";
import { Button } from "./Button";
import { Input } from "./Input";

class Calculator extends Component {
  constructor(props) {
    super(props);

    this.state = {
      budget:""
    };
  }
   
  ...

  addToInput = val => {
    this.setState({ budget: this.state.budget + val });
  };

  handleEqual = () => {
    this.setState({ budget: math.evaluate(this.state.budget) });
  };

  ...
  
  render() {
    return (
      <div className="app">
        <div className="calc-wrapper">
          <Input input={this.state.budget} />
          <div className="row">
            <Button handleClick={this.addToInput}>4</Button>
            <Button handleClick={this.addToInput}>5</Button>
            <Button handleClick={this.addToInput}>6</Button>
            <Button handleClick={() => this.handlePoints()}></Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>1</Button>
            <Button handleClick={this.addToInput}>2</Button>
            <Button handleClick={this.addToInput}>3</Button>
            <Button handleClick={() => this.handleVal()}></Button>
          </div>
            <div className="row">
            <Button handleClick={this.addToInput}>7</Button>
            <Button handleClick={this.addToInput}>8</Button>
            <Button handleClick={this.addToInput}>9</Button>
            <Button handleClick={() => this.handleScheme()}></Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>.</Button>
            <Button handleClick={this.addToInput}>0</Button>
            <Button handleClick={() => this.handleEqual()}>=</Button>
            <Button handleClick={() => this.handlePlayers()}></Button>
          </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Calculator;

function App() {
  const [isFlipped, setIsFlipped] = React.useState(false);
  
  const handleEqualPress = () => {
    setIsFlipped(true);
  }

  // we need to call this somewhere to flip the calculator back
  const flipBack = () => {
    setIsFlipped(false);
  }

  return (
      <Flippy
      isFlipped={isFlipped}
      flipDirection="horizontal" // horizontal or vertical
      style={{ width: "400px", height: "600px" }} /// these are optional style, it is not necessary
    >
      <FrontSide>
        // onEqualPress needed to know when we pressed equal
        <Calculator onEqualPress={handleEqualPress} /> //// <-------- component to be flipped
      </FrontSide>
      // Inside backside (where you wrote FIELD) add a handler for flipBack to flip the calculator back
      <BackSide style={{ backgroundColor: "#175852" }}>FIELD</BackSide>
    </Flippy>
  );
}

class Calculator extends Component {
  constructor(props) {
    super(props);

    this.state = {
      budget:""
    };
  }

  ...

  addToInput = val => {
    this.setState({ budget: this.state.budget + val });
  };

  handleEqual = () => {
    this.setState({ budget: math.evaluate(this.state.budget) });
    // needed for setting flippy state
    this.props.onEqualPress();
  };

  ...

  render() {
    return (
      <div className="app">
        <div className="calc-wrapper">
          <Input input={this.state.budget} />
          <div className="row">
            <Button handleClick={this.addToInput}>4</Button>
            <Button handleClick={this.addToInput}>5</Button>
            <Button handleClick={this.addToInput}>6</Button>
            <Button handleClick={() => this.handlePoints()}></Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>1</Button>
            <Button handleClick={this.addToInput}>2</Button>
            <Button handleClick={this.addToInput}>3</Button>
            <Button handleClick={() => this.handleVal()}></Button>
          </div>
            <div className="row">
            <Button handleClick={this.addToInput}>7</Button>
            <Button handleClick={this.addToInput}>8</Button>
            <Button handleClick={this.addToInput}>9</Button>
            <Button handleClick={() => this.handleScheme()}></Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>.</Button>
            <Button handleClick={this.addToInput}>0</Button>
            <Button handleClick={() => this.handleEqual()}>=</Button>
            <Button handleClick={() => this.handlePlayers()}></Button>
          </div>
          </div>
        </div>
      </div>
    );
  }