javascript - 添加和删​​除类以激活 react 中的关键帧

Question

我目前正在从事我的第一个 React 元素。

我已将 onClick 事件放置到其中一个元素。这个元素恰好是一个按钮。我想要实现的是在过渡过程中从不透明度变为 0 的图像，以确认用户已成功添加输入。这是用下面的关键帧设置的

#showTick {
    width: 30%;
    opacity: 0;
}

.activateKF {
    animation: showTick 0.7s;
}

@keyframes showTick {
    0% {opacity: 0;}
    25% {opacity: 0.5;}
    50% {opacity: 1;}
    75% {opacity: 0.5;}
    100% {opacity: 0;}
}

showtick 样式是元素的默认样式。当用户单击按钮时，我想将 .activateKF 类添加到 #showTick 元素。我正在使用以下代码执行此操作。

goalCreation=()=>{
    document.getElementById("showTick").classList.remove("activateKF"); 
    let goal = document.getElementById("enterGoal").value;
    if (goal.length < 1){
        return false;
    } else {
        document.getElementById("showTick").classList.add("activateKF");            
        this.props.submitGoal(goal);
    }
}

我正在尝试删除同一函数中的类，以便每当用户单击它时，关键帧都可以在单击事件时再次添加到元素中 - 并且可以发生动画。但是，我发现它只在第一次有效。

即使我删除了删除类的行，它仍然只在第一次有效。我不明白为什么？

请有人帮忙，以便每当用户点击按钮时，关键帧每次都会激活？

更新:我已经将这个实际的 React 组件包含在我的代码中

import React, { Component } from 'react';
import '../Styles/creategoal.css';
import specificGoal from '../Images/specificgoal.png';
import cost from '../Images/cost.png';
import tick from '../Images/greentick.jpg';
import '../Styles/creategoal.css';
import '../App.css';

export default class CreateGoal extends Component {
    constructor(props){
        super(props);
        this.state = {
            showCostDiv: false,
            showSpecificDiv: false
        }
    }

    goalCreation=()=>{
        let goal = document.getElementById("enterGoal").value;
        if (goal.length < 1){
            return false;
        } else {
            document.getElementById("showTick").classList.add("activateKF");            
            this.props.submitGoal(goal);
        }
    }

    closeHelp=(e)=>{
        let currentClicked = e.target.tagName;
        if (this.state.showCostDiv && currentClicked !== "SECTION"){
            this.setState({
                showCostDiv: false
            })
        if (this.state.showSpecificDiv && currentClicked !== "SECTION"){
            this.setState({
                showSpecificDiv: false
            })
        }
        }
    }

    openSpecificWindow=()=>{
        this.setState({
            showSpecificDiv: true
        })
    }

    closeSpecificWindow=()=>{
        this.setState({
            showSpecificDiv: false
        })
    }

    openCostWindow=()=>{
        this.setState({
            showCostDiv: true
        })
    }

    closeCostWindow=()=>{
        this.setState({
            showCostDiv: false
        })
    }

    render(){

        let specificDivStatus = "hideContent";
        let costDivStatus = "hideContent";

        if (this.state.showSpecificDiv){
            specificDivStatus = "showContent";
        }

        if (this.state.showCostDiv){
            costDivStatus = "showContent";
        }

        return (
        <div onClick={this.closeHelp} className="createGoal">

            <div id="banner" className="goalSetBanner">
                <h1>SET YOUR GOAL</h1>
            </div>
            <span className="goalTip">Consider the following when setting your goal:</span>

            <section id="BeSpecificHelp" className={specificDivStatus}>
                <p>Describe exactly what your goal is, and when its possible use numbers to make it measurable. This excercise will turn your idea or dream
                even closer to reality.</p>
                <br/>
                <p>Examples:</p>

                <p><span className="incorrect">Wrong:</span> Weight loss.<br/>
                <span className="correct">Right:</span> Losing 8Kg.</p>

                <p><span className="incorrect">Wrong:</span> Read more books.<br/>
                <span className="correct">Right:</span> Read a new book every 15 days.</p>

                <p><span className="incorrect">Wrong:</span> Buying a house.<br/>
                <span className="correct">Right:</span> Buying a house within two bedrooms in a given address.</p>

                <span id="closeWindowSpecific" onClick={this.closeSpecificWindow}>Close</span>              
            </section>

            <section id="considerCostHelp" className={costDivStatus}>
                <p>Do not focus only on the result you will get.</p>
                <p><strong>Your time and energy are limited resources</strong></p>

                <p>Reflect on what it will take you to achieve this goal.</p> 

                <p>Finish completing it if you are willing to pay the price.</p>

                <span id="closeWindowCost" onClick={this.closeCostWindow}>Close</span>              
            </section>

            <main className="setGoalInfo">
                <div id="beSpecificGoal" className="considerGoal">
                    <img src={specificGoal} alt="Specific Goal" />
                    <span className="goalHelp">Be as specific as possible</span>
                    <span id="beSpecificLink" onClick={this.openSpecificWindow} className="link-span">TAP FOR MORE INFO</span>
                </div>
                <div id="considerCost" className="considerGoal">
                    <img src={cost} alt="Cost of Goal" />
                    <span className="goalHelp">What will it cost you?</span>
                    <span id="considerCost" onClick={this.openCostWindow} className="link-span">TAP FOR MORE INFO</span>
                </div>
            </main>

            <div id="goalAdded">
                <img src={tick} id="showTick" alt="Goal Added" />
            </div>

            <div className="inputDiv">
                <input type="text" id="enterGoal" placeholder="What is your goal?"></input>
            </div>

            <button onClick={this.goalCreation} id="createGoal">CREATE MY GOAL</button>

        </div>
            )
    }
}

非常感谢您的帮助。

Answer 1

React 的基本规则是您不直接操作 DOM。 React 将在渲染时构建一个虚拟 DOM，并仅替换它检测到的已更改的 DOM 部分。如果您在 React 渲染周期之外操作 DOM，它可能无法按预期工作。

在 React 组件上使用 id 属性也不是一个好主意。其一，它降低了组件的可重用性(id 在整个页面中应该是唯一的)，并且 React 还会在 DOM 中呈现自己的 id。

在 React 中，您可以使用 ref语句，它是一个包含 null(卸载时)或元素安装后的元素的函数，但是，这可能不是您在这里需要的(当您读取值时，人们宁愿使用它来自输入)。

可能，您只想使用类似 React animation 的东西或者您只想根据本地组件状态添加一个类。

通过查看您当前的整体代码，您会发现您还没有经常使用 React。您有大量硬编码数据和大量重复概念。

实现您当前目标的一种方法是实现如下内容:

const { classNames } = window;
const { Component } = React;

class CheckableButton extends Component {
  constructor() {
    super();
    this.state = {
      submitted: false
    };
    this.handleSubmit = this.handleSubmit.bind( this );
  }
  componentDidUpdate() {
    const { submitted } = this.state;
    if (submitted) {
      // trigger submitted to be cleared
      this.resetTimer = setTimeout( () => this.setState( { submitted: false } ), 700 );
    }
  }
  componentWillUnmount() {
    // make sure the state doesn't get manipulated when the component got unmounted
    clearTimeout( this.resetTimer );
  }
  handleSubmit() {
    // set the submitted state to true
    this.setState( { submitted: true } );
  }
  render() {
    const { submitted } = this.state;
    const { title } = this.props;
    return (
      <button 
        type="button" 
        className={ classNames( 'checkable', { 'checked': submitted } ) } 
        onClick={ this.handleSubmit }>{ title }</button>
    );
  }
}

ReactDOM.render( 
  <CheckableButton title="Create goal" />, document.getElementById('container') );

button.checkable {
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
}
.checkable::before {
  display: inline-block;
  width: 20px;
  content: ' ';
  padding-right: 5px;
}
.checkable.checked::before {
  content: '✓';
  color: darkgreen;
  padding-right: 5px;
  font-weight: bold;
  opacity: 0;
  animation: showTick 0.7s;
}

@keyframes showTick {
  0% {opacity: 0;}
  25% {opacity: 0.5;}
  50% {opacity: 1;}
  75% {opacity: 0.5;}
  100% {opacity: 0;}
}

<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<script id="classnames" src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<div id="container"></div>

你在组件中看到的逻辑，主要是基于 React 生命周期事件。单击按钮时，状态更改为已提交，这又将触发 componentDidUpdate，您可以在此处检查已提交标志是否设置为 true。当它发生时，您可以通过 setTimeout 创建回调以再次删除已提交的标志。

handleSubmit 函数当然可以被操纵以调用通过 props 向下传递的事件处理程序

当你重新设计你当前的组件时，你可能应该考虑为你的“窗口”创建组件，这样它们也可以通过 state/props 来操作，这样它们就变成了可重用的组件