在 React 中點擊特定組件按鈕觸發動畫

Question

我一直在使用react-flyppy來動畫我的組件的翻轉。 下面我有 App.jsx。 要翻轉的組件是<Calculator/> ：

import React from "react";
import "./App.css";
import Flippy, { FrontSide, BackSide } from "react-flippy";
import Calculator from "./components/Calculator.jsx";


export default function App() {
  return (
    <Flippy
      flipOnHover={false} // default false
      flipOnClick={true} // default false
      flipDirection="horizontal" // horizontal or vertical
      //ref={r => (this.flippy = r)} // to use toggle method like this.flippy.toggle()
      // if you pass isFlipped prop component will be controlled component.
      // and other props, which will go to div
      style={{ width: "400px", height: "600px" }} /// these are optional style, it is not necessary
    >
      <FrontSide>
        <Calculator/> //// <-------- component to be flipped
      </FrontSide>
      <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;

僅當單擊一個特定的計算器按鈕（例如“=”）時，我該如何處理組件的翻轉？

此鏈接https://codesandbox.io/s/mlh8t?file=/src/components/CardComponent.js提示如何使用{isFlipped}和onClick={handleChange.bind(null, id)}處理此點擊onClick={handleChange.bind(null, id)} ，但我不知道如何做到這一點。

Answer 1

最簡單的解決方案是使其成為受控組件：

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>
  );
}

並且計算器組件需要一個新的道具onEqualPress

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>
    );
  }