Bootsrap 按钮在 React 中无法正常工作
我正在 React 中构建一个响应式导航栏，当您放大页面时，它会隐藏链接并显示一个带有带有链接的下拉列表的按钮。
问题是，当我单击按钮时，它不会执行任何操作，并且在引导网站中，它可以正常运行。
我做错了什么吗？
这是我的代码：
import React, { Component } from 'react';
import axios from "axios";
import { Redirect } from "react-router-dom"
import styles from '../styles/loginsignup.css'
import logo from '../img/nowyourguest.png'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'
export default class Login extends Component {
state = {
email: '',
password: ''
};
handleSubmit = event => {
event.preventDefault();
const {email, password} = this.state;
axios({
url: "/authentication/signin",
method: "POST",
data: {
email,
password
}
})
.then(response => {
const isAuthenticated = response.data.isAuthenticated
window.localStorage.setItem('isAuthenticated', isAuthenticated);
this.props.history.push('/profile')
})
.catch(error => {
this.setState({
errorMessage: error.response.data.message
})
})
};
handleChange = event => {
const {name, value} = event.target;
this.setState({
[name]: value
})
}
render() {
const isAuthenticated = window.localStorage.getItem('isAuthenticated');
if (isAuthenticated) {
return <Redirect to='/profile'/>
}
千巷猫影3回答
-
缥缈止盈
该按钮不起作用，因为它取决于jQuery，因为您需要jQuery在代码中安装，但我不建议您jQuery在代码中安装。为此，您可以使用react-bootstrap<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon" /></button> -
忽然笑
您需要将您的button点击与其处理程序连接起来基本用法假设您使用有状态或基于类的组件。const onClickHandler = (e) =>{ console.log(e);}render(){ <button onClick={this.onClickHandler}>Click Me!</button>} -
MMMHUHU
所以我必须在index.html中导入jquery，这就是我导入它的方式：<!DOCTYPE html><html dir="ltr"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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"></head><body> <div id="root"></div> <!-- Turbo library imports: jQuery, Turbo CDN, sample app.js --> <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 type="text/javascript" src="/dist/js/vendor.min.js"></script> <script type="text/javascript" src="https://cdn.turbo360-dev.com/dist/turbo.min.js"></script> <script type="text/javascript" src="/dist/bundle/commons.js"></script> <script type="text/javascript" src="/dist/bundle/app.js"></script> <!-- React code bundle --></body></html>
随时随地看视频慕课网APP
相关分类
Html5