我正在 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 回答
缥缈止盈
TA贡献2041条经验 获得超4个赞
该按钮不起作用，因为它取决于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>
忽然笑
TA贡献1806条经验 获得超5个赞
您需要将您的button点击与其处理程序连接起来
基本用法假设您使用有状态或基于类的组件。
const onClickHandler = (e) =>{
console.log(e);
}
render(){
<button onClick={this.onClickHandler}>Click Me!</button>
}
MMMHUHU
TA贡献1834条经验 获得超8个赞
所以我必须在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>
- 3 回答
- 0 关注
- 77 浏览
添加回答
举报
0/150
提交
取消