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

假设当您尝试将$('.nav-cart-options-toggle').on('click', function() {...转换为响应代码时，您正在将jsx中的onClick属性添加到具有类nav-cart-options-toggle的元素中。

$(this)基本上是目标元素的jQuery对象。在您的事件监听器函数中进行响应时，您可以通过event.target获取当前元素。 jQuery对象将具有其他可用的方法，您不会在event.target中找到这些方法。您可以编写简单的Javascript来做到这一点，或者可以通过反应来应用某种绑定。

Answer 2

您的班级应该看起来像这样。

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>)
  }
}

在React.JS中使用jQuery“ this”选择器替换

2 个答案: