Comment anti-rebond efficacement dans les applications React ?

Comment puis-je effectuer un anti-rebond ?

Réponse à la question d'origine

La fonction anti-rebond fournie ne fonctionne pas car elle n'est pas liée au fonction handleOnChange. Pour résoudre ce problème :

    handleOnChange: function(event) {
        // Make Ajax call
    }.bind(this)

Techniques anti-rebond modernes

Promesses et crochets (recommandé, 2019)

const SearchBox = React.createClass({
render: function() {
return <input type=&quot;search&quot; name=&quot;p&quot; onChange={this.handleOnChange} />;
},
handleOnChange: function(event) {
    // Make Ajax call
  }
});

Promesse anti-rebond

import React from 'react';
import awesomeDebouncePromise from 'awesome-debounce-promise';

const SearchBox = () => {
    const [inputText, setInputText] = React.useState('');

    const debouncedSearch = React.useMemo(
        () => awesomeDebouncePromise(args => searchStarwarsHeroAsync(args), 300),
        []
    );

    // ...rest of SearchBox component
};

Rappels

Avec les propriétés de la classe ES6 :

class SearchBox extends React.Component {
    method = debounce(() => {
        // ...
    });
}

Avec le constructeur de classe ES6 :

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.method = debounce(this.method.bind(this), 1000);
    }
    method() { ... }
}

Avec ES5 :

var SearchBox = React.createClass({
    method: function() {...},
    componentWillMount: function() {
        this.method = debounce(this.method.bind(this), 100);
    },
});

Événement de gestion pooling dans React

Dans React, les objets événementiels sont regroupés et peuvent être réutilisés. Cela peut entraîner des problèmes lors de l'utilisation de l'anti-rebond ou de la limitation, car les propriétés de l'événement peuvent être effacées après l'appel du rappel de l'événement.

Pour éviter cela, utilisez la méthode persist() sur l'objet événement. Cela empêchera l'événement d'être regroupé et vous permettra d'accéder à ses propriétés de manière asynchrone.

onClick = (e) => {
    e.persist();
    // ...
};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!