对状态变化做出反应重新渲染动画答案

【问题标题】：React rerender animation on state change对状态变化做出反应重新渲染动画
【发布时间】：2019-07-12 17:10:25
【问题描述】：

我在我的项目中使用 Animate css，并且我有一个表单，用户应该在其中提供问题的答案。如果答案是正确的话，correct 应该淡入，wrong 在相反的情况下。这是我的代码的一个工作简化示例。

有状态组件：

import React, { Component } from 'react'
import FormCheckIfCorrect from './FormCheckIfCorrect'

class Form extends Component {
  constructor(props) {
    super(props)

    this.state = {
      correct: '5',
      userInput: '',
      userAnswer: ''
    }
  }

  handleChange = (e) => {
    this.setState({ userInput: e.target.value })
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({ userAnswer: '' }, () => {
      this.setState({ userAnswer: this.state.userInput })
    })
  }

  render() {
    return (
      <div>
        <p>2 + 3 = ? </p>
        <form onSubmit={this.handleSubmit}>
          <input type='number' value={this.state.userInput} onChange={this.handleChange} />
          <button >Submit</button>
        </form>
        {this.state.userAnswer !== '' ? <FormCheckIfCorrect userAnswer={this.state.userAnswer} correct={this.state.correct} /> : ''}
      </div>
    )
  }
}

export default Form

功能组件：

import React from 'react'

const FormCheckIfCorrect = (props) => {
  let result = props.userAnswer === props.correct ? <p className="animated fadeIn">correct</p> : <p className="animated fadeIn">wrong</p>
  return result
}

export default FormCheckIfCorrect

我的问题是关于我的这部分代码：

  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({ userAnswer: '' }, () => {
      this.setState({ userAnswer: this.state.userInput })
    })
  }

为了实现每次用户单击提交按钮时的淡入效果，我将userAnswer设置为空，然后在回调中我再次将其设置为userInput。它有效（不要忘记包含动画 css），但我认为这不是正确的方法。如果有人能告诉我如何正确操作，我将不胜感激。

【问题讨论】：

标签： javascript reactjs animate.css

【解决方案1】：

你可以重构你的组件FormCheckIfCorrect

    const FormCheckIfCorrect = ({ userAnswer, correct }) => ( 
        <p className="animated fadeIn">
          { userAnswer === correct ? 'correct' : 'wrong' }
        </p>
    )

这样您就不会通过添加具有重复类的相同 p 标签来重复自己。相反，我们只改变段落的内容

【讨论】：