JQuery "этот" замена селектора в React.JS

Question

Я конвертирую некоторый код jQuery в React.JS, но застрял из-за селектора jQuery "this".

  $('.nav-cart-options-toggle').on('click', function() {
  $(this).toggleClass('show');
  $(this)
    .closest('.nav-cart-options')
    .find('ul')
    .toggle();
});

Я смог выполнить переключение с помощью React, но переключает всеопции для отдельного клика вот так:

Но мне нужно переключаться для каждого выпадающего меню вот так:

Выпадающие значения поступают из API, и может быть неизвестное количество опций.

В jquery мы могли бы легко сделать это, используя селектор this.

Но я не совсем понимаю, как это сделать в React.

Мой код React для справки.

    handleCartOptionsToggle = () => {
    this.setState((prevState, nextProps) => {
      return {
        cartOptionsToggle: !prevState.cartOptionsToggle
      };
    });
  };


    const displayBlock = {
        display: 'block'
      };



const displayNone = {
    display: 'none'
  };

  const cartOptionsUlClass = cartOptionsToggle ? displayBlock : displayNone;

<div className="nav-cart-options">
              <div
                className={cartOptionsClass}
                onClick={handleCartOptionsToggle}
              >
                Details anzeigen <i className="fa fa-angle-down"></i>
              </div>
              <ul style={cartOptionsUlClass}>
                <li>
                  <strong className="label">PRODUKT:</strong>
                  <span className="values">vorne (detailliert)</span>
                </li>
                <li>
                  <strong className="label">PRODUKT:</strong>
                  <span className="values">vorne (detailliert)</span>
                </li>
                <li>
                  <strong className="label">PRODUKT:</strong>
                  <span className="values">vorne (detailliert)</span>
                </li>
              </ul>
            </div>

Answer 1

Ваш класс должен выглядеть следующим образом.

class Dropdowns extends React.PureComponent {
  handleCartOptionsToggle = () => {
    this.setState({
        cartOptionsToggle: !this.state.cartOptionsToggle
    });
  };

  render() {
    const cartOptionsUlClass = { display: this.state.cartOptionsToggle ? 'block': 'none' }
    return (<div className="nav-cart-options">
      <div
        className={cartOptionsClass}
        onClick={this.handleCartOptionsToggle}
      >
        Details anzeigen <i className="fa fa-angle-down"></i>
      </div>
      <ul style={cartOptionsUlClass}>
        <li>
          <strong className="label">PRODUKT:</strong>
          <span className="values">vorne (detailliert)</span>
        </li>
        <li>
          <strong className="label">PRODUKT:</strong>
          <span className="values">vorne (detailliert)</span>
        </li>
        <li>
          <strong className="label">PRODUKT:</strong>
          <span className="values">vorne (detailliert)</span>
        </li>
      </ul>
    </div>)
  }
}

Answer 2

Предполагая, что при попытке преобразовать $('.nav-cart-options-toggle').on('click', function() {... в реагирующий код, вы добавляете атрибут onClick в jsx к элементу, имеющему класс nav-cart-options-toggle.

$(this), по сути, является объектом jQueryцелевой элемент.В функции прослушивателя событий в реагировать текущий элемент можно получить по event.target.У объекта jQuery будут доступны дополнительные методы, которые вы не получите в event.target.Вы можете написать либо простой Javascript, чтобы сделать это, либо, если вы можете выяснить какое-то связывание, которое вы можете применить, хотя реагируйте.