代码之家 › 专栏 › 技术社区 › Arnab

React.JS中的jquery“this”选择器替换

reactjs jquery javascript

Arnab · 技术社区 · 6 年前

我正在将一些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 选择器。

但我不知道该怎么做。

我的代码供参考。

    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>

1 回复 | 直到 6 年前

Nicolae Maties Richard Jordan 6 年前

你的班级应该是这样的。

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

marc_s MisterSmith 6 年前

假设你试图转换 $('.nav-cart-options-toggle').on('click', function() {... 要对代码作出反应,您需要添加 onClick nav-cart-options-toggle .

$(this) 基本上是目标元素的jQuery对象。在react中的事件侦听器函数中,可以通过 event.target . jQuery对象将有额外的方法可供使用,而这些方法是您无法获得的 事件.目标 . 您可以编写普通的Javascript来实现这一点,也可以通过react找到一些可以应用的绑定。