javascript - 在 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)}但我不确定如何执行此操作。

标签： javascriptreactjs

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