Заставить / вывести текст при нажатии кнопки в React

Question

У меня есть генератор случайных цитат, написанный на React: https://codepen.io/1000mileworld/pen/RwNMwKE

Когда я нажимаю кнопку новой цитаты, я бы хотел, чтобы предыдущая цитата исчезла, а новая цитата - fade in.

Я пытался использовать некоторые jQuery, которые изменили непрозрачность до 0, прежде чем устанавливать новое состояние, а затем вернули непрозрачность обратно в 1 после. Я, вероятно, должен сделать это где-то за пределами handleClick (), но не уверен, как.

handleClick() { 
 $("#text").animate({ opacity: 0 }, 500);

 const quote = getRandomQuote();
 this.setState({
   text: quote.text,
   author: quote.author
 });

 $("#text").animate({ opacity: 1 }, 500);    
}

Answer 1

В общем случае не рекомендуется запрашивать DOM (ie с помощью селекторов, чтобы выбрать элемент для вызова $.animate()) при рендеринге этих элементов с помощью React.

Perhpas, вы могли бы рассмотреть другой подход, который обходит JQuery все вместе и вместо этого использует CSS переходы и React для достижения эквивалентного перехода затухания?

Что-то подобное может работать для вас :

JSX

const FADE_DURATION = 1000;

class Application extends React.Component {
    constructor(props){
    super(props);
    this.state = {     
        text: quote.text,
        author: quote.author,

        // Add extra state to control fading
        fadeTransition : null,
        fadeState : "fade-in",
    }
    this.handleClick = this.handleClick.bind(this)
    }

    handleClick(){ 

    // Create a timer that runs after quote
    // fades out
    const timeout = setTimeout(() => {

        // After current quote faded out, fetch
        // next quote and display
        const quote = getRandomQuote();

        this.setState({
        text: quote.text,
        author: quote.author,
        // Apply additional state to control
        // fading transition
        fadeTransition : null,
        fadeState : 'fade-in'
        });    
    }, FADE_DURATION);

    // Stop any existing transition
    clearTimeout(this.state.fadeTransition);

    // Update state to perform the fade out from
    // current quote
    this.setState({ 
        fadeState : 'fade-out', 
        fadeTransition : timeout 
    });
    }

    render() {
    return (
        <div className={`fade-wrapper ${this.state.fadeState}`} 
                style={{ transitionDuration: `${FADE_DURATION}ms`}}>
        <Display text={this.state.text} 
                    author={this.state.author} 
                    click={this.handleClick} />
        </div>
    );
    }
}

CSS

/* Add this to existing css */
.fade-wrapper {
    transition:opacity ease-in-out;
}
.fade-out {
    opacity:0;  
}
.fade-in {
    opacity:1;
}

Вот рабочий пример (извините, CSS немного сломан) - надеюсь, это поможет!

Answer 2

Вы можете использовать обратный вызов из animate и установить там состояние. Что-то вроде:

    $( "#txt" ).animate({
    opacity: 0,
  }, 2000, function() {
    that.setState({text:"world"});
    $( "#txt" ).animate({
    opacity: 1,
  }, 2000, function() {
    // Animation complete.
  });

Вы должны знать, что область действия 'this' должна обрабатываться в обратном вызове. Я просто сделал это = в этом примере, чтобы продемонстрировать использование обратного вызова.

https://jsfiddle.net/pythagoras2357/8zarn94j/9/

https://api.jquery.com/animate/