React
ReactJS gebruiken met jQuery

Reageer op JS met jQuery

Ten eerste moet u jquerybibliotheek importeren. We moeten ook findDOmNode importeren als we de dom gaan manipuleren. En uiteraard importeren we React ook.

import React from 'react';
import { findDOMNode } from ‘react-dom’;
import $ from ‘jquery’;

We stellen een pijlfunctie 'handleToggle' in die wordt geactiveerd wanneer op een pictogram wordt geklikt. We tonen en verbergen alleen een div met een verwijzing met de naam 'toggle' op Klik op een pictogram.

handleToggle = () => {
    const el = findDOMNode(this.refs.toggle);
    $(el).slideToggle();
};

Laten we nu de referentie instellen met de naam 'toggle'

<ul className=”profile-info additional-profile-info-list” ref=”toggle”>
  <li>
    <span className=”info-email”>Office Email</span>   [email protected]
  </li>
</ul>

Het div-element waar we de 'handleToggle' op onClick zullen activeren.

 <div className=”ellipsis-click” onClick={this.handleToggle}>
   <i className=”fa-ellipsis-h”/>
 </div>

Laten we de volledige code hieronder bekijken, hoe deze eruit ziet.

import React from ‘react’;
import { findDOMNode } from ‘react-dom’;
import $ from ‘jquery’;

export default class FullDesc extends React.Component {
    constructor() {
        super();
    }

    handleToggle = () => {
        const el = findDOMNode(this.refs.toggle);
        $(el).slideToggle();
    };

    render() {
        return (
            <div className=”long-desc”>
                <ul className=”profile-info”>
                    <li>
                        <span className=”info-title”>User Name : </span> Shuvo Habib
                    </li>
                </ul>

                <ul className=”profile-info additional-profile-info-list” ref=”toggle”>
                    <li>
                        <span className=”info-email”>Office Email</span> [email protected]
                    </li>
                </ul>
                
                <div className=”ellipsis-click” onClick={this.handleToggle}>
                    <i className=”fa-ellipsis-h”/>
                </div>
            </div>
        );
    }
}

We zijn klaar! Dit is de manier waarop we jQuery in React- component kunnen gebruiken.