Question

我需要在文档加载时添加onClick侦听器。由于某些原因，我不想使用状态。首先，我想创建一个规则，使我可以在任何地方使用它并始终显示下一个元素。其次，我也想添加淡入淡出或滑动效果。下面的代码不起作用。

componentDidMount() {
  $(document).ready(function() {
    $(".showNext").click(function() {
      $(this).next().slideToggle();
    });
  });
}

if (!loadingData)
  render() {
    return(
      <div>

        <div className="showNext">Show element #1</div>
        <div style={{display:"none"}}>Element #1</div>

        <div className="showNext">Show element #2</div>
        <div style={{display:"none"}}>Element #2</div>

      </div>
    );
  }
} else {
  <div>Loading ... </div>
}

Answer 1

如果您已经在使用componentDidMount方法，则似乎不关心创建任何函数，请使用以下方法更新代码：

handleClickMethod = () => console.log('clicked')
render() {
  return(
    <div>

      <div className="showNext">Show element #1</div>
      <div style={{display:"none"}} onClick={this.handleClickMethod}>Element #1</div>

      <div className="showNext">Show element #2</div>
      <div style={{display:"none"}} onClick={this.handleClickMethod}>Element #2</div>

    </div>
  );
}

甚至更好！创建一个可点击的组件！

class Clickable extends Component {
  _handleClick = () => {
    console.log('clicked')
    this.props.onClick && this.props.onClick()
  }

  render() {
    const {...props} = this.props
    return <div {...props} onClick={this._handleClick}/>
  }
}

并在主要组件中像这样使用它：

render() {
  return(
    <div>

      <Clickable className="showNext">Show element #1</Clickable>
      <div style={{display:"none"}}>Element #1</div>

      <Clickable className="showNext">Show element #2</Clickable>
      <div style={{display:"none"}}>Element #2</div>

    </div>
  );
}

无论如何，对于您要完成的工作，使用以下类似内容会更好：

class Toggleable extends Component {
  state = {toggled: false}

  _toggleDiv = () => {
    this.setState({toggled: !this.state.toggled})
  }

  render() {
    return (
      <div>
        <div className="showNext" onClick={this._toggleDiv}>{this.props.showText}</div>
        {this.state.toggled && <div>{this.props.text}</div>}
      </div>
    )
  }
}

并在主要组件中像这样使用它：

render() {
  return(
    <div>

      <Toggleable showText={'Show element #1'} text={'Element #1'}/>
      <Toggleable showText={'Show element #2'} text={'Element #2'}/>

    </div>
  );
}

欢迎使用模块化编程！

Answer 2

通常，开发人员认为在React应用程序中使用jQuery可能不是一个好主意，但有时开发人员确实希望使用一些jQuery魔术，例如褪色，滑动等。我个人发现React最好使用ref和目标ID与ReactDOM配合使用。 jQuery类绝对不是最好的选择，但是...

回到我的问题，它对我不起作用，因为我先使用withTracker（流星/反应）来加载一些数据，所以我正在渲染dom并加载没有我班级的gif。然后，一旦数据加载完毕，我就使用componentDidMount方法中以jQuery为目标的类渲染主要内容。

如果目标类是第一次渲染，我的初始代码将起作用。我在最初的问题中更新了代码，所以没有混乱。

React-jQuery-在文档加载时添加onClick侦听器

2 个答案: