代码之家 › 专栏 › 技术社区 › Ahm.

react js-使用bootstrap4 cdn,如何在react中手动启用javascript事件处理程序?

bootstrap-4 reactjs javascript

Ahm. · 技术社区 · 7 年前

我上网已经有一段时间了,一点希望也没有。

我使用“折叠”引导来切换一个分区的可见性。

我需要通过react onclick来控制这个切换。bootstrap说可以通过“$('.collapse').collapse()”访问,但是出于某种原因,我不能在react中这样做…..除了导入jquery或使用react bootstrap组件,还有什么建议吗??

class Container extends Component {
  render() {
   return (

     <div className="wrapper">

          <div className="collapse in" id="collapseExample">
           <h1>Hide me</h1>
          </div>

          <div className="container">
           <div className="row">
             <button
              data-toggle="collapse"
              data-target="#collapseExample"
              aria-expanded="false"
              aria-controls="collapseExample">
              Get a random Book
            </button>
          </div>
         </div>

    </div>

) }

2 回复 | 直到 7 年前

bonniss 7 年前

引导JavaScript依赖于jQuery。jquery和react有不同的方法来操作DOM。为了避免将来出现问题,您不应该同时使用这两者。如果你在使用react, thinking in React 很重要。

引导程序的一个好的反应包装器是 reactstrap . 我建议您使用库来构建基于引导的组件,而不是编写引导原始类。一个名为 Collapse 可能适合您的需要,正如您在示例代码中看到的那样 here .

如果您对导入任何库都不感兴趣,那么您可以使用 state .内部理念与 折叠 上面的示例代码:

class MyCollapse extends Component {
  state = {
    isOpen: false
  };

  toggleState = () => this.setState( prevState => ({ isOpen: !prevState.isOpen }));

  render() {
    return (
      <div>
        <button onClick={this.toggleState}>Click to toggle</button>
        {
          this.state.isOpen &&
          <div className="my-collapse">
            {/* COLLAPSE CONTENT */}
          </div>
        }
      </div>
    )
  };
}

每次单击按钮时,状态属性 isOpen 被切换,这将导致组件的重新呈现。这是最大的反应强度之一:非常灵活。

Shawn Andrews 7 年前

下面的代码片段说明了应该如何完成。如果它在您的程序中仍然不能正常工作,我将验证cdn脚本链接是否正确。

提醒一下,在reactjs中,我们不应该使用jquery,而是通过组件来操作虚拟DOM。

// Example stateless functional component
const SFC = props => (
  <div>{props.label}</div>
);

// Example class component
class Container extends React.Component {
  render() {
     return (

       <div className="wrapper">

            <div className="collapse" id="collapseExample">
             <h1 className="card card-body">Hide me</h1>
            </div>

            <div className="container">
             <div className="row">
               <button className="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Get a random book</button>
            </div>
           </div>

      </div>
  ) }
}

// Render it
ReactDOM.render(
  <Container/>,
  document.getElementById("react")
);

<div id="react"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>