【发布时间】：2021-08-29 16:03:53
【问题描述】：
我是 React-JS 的初学者。在这里，我尝试单击按钮并导航到另一个页面。但导航无法正常工作。我正确地将点击功能调用到按钮中。你们能检查我的代码并解决我的问题吗？ “Voir toutes les notification”是按钮名称。
import React from 'react'
import Footer from '../../components/Footer/index.js';
import Header from "../../components/Header/index.js"
import Carnetdenote from "../../public/img/Carnetdenote.svg"
import Settings from "../../public/img/AdminSettings.svg"
import Producteurs from "../../public/img/Producteurs.svg"
class consultantdashboard extends React.Component {
onClick = () => this.props.history.push("/consultantnotification_2.6");
render() {
return (
<div>
<Header></Header>
<div>
<div>
<main>
<div className="headerBecground">
<div >
<div className="desktophidden">
<div className="producteure-dashboard-table-box">
<h4 className="headerColor">Notifications</h4>
<div class="table-responsive">
<table class="table">
<tr>
<td><svg class="svg-inline--fa fa-circle fa-w-16 fontColorRed" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>
2021-03-29<br /> Une nouvelle photo à été ajouté<br /> Victor Morin</td>
</tr>
<tr>
<td><svg class="svg-inline--fa fa-circle fa-w-16 fontColorRed" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>
2021-03-29<br /> Un nouveau commentaire à été ajouté<br /> Victor Morin</td>
</tr>
<tr>
<td>
2021-03-29<br /> Une nouvelle photo à été ajouté<br /> Victor Morin</td>
</tr>
<tr> <button type="button" class="btn btn-primary primaryTop" onClick={this.onClick}>Voir toutes les notificationsx</button></tr>
</table>
</div>
</div>
</div>
</div>
<br></br>
<div class=" mobilehidden">
<div class="container-fluid" >
<div class="card-body">
<div className="producteure-dashboard-table-box">
<h4 className="headerColor">Notifications</h4>
<div class="table-responsive">
<table class="table " width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Activité</th>
<th>Auteur</th>
</tr>
</thead>
<tr>
<td><svg class="svg-inline--fa fa-circle fa-w-16 fontColorRed" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg></td>
<td>2021-03-29</td>
<td>Une nouvelle photo à été ajouté</td>
<td>Victor Morin</td>
</tr>
<tr>
<td><svg class="svg-inline--fa fa-circle fa-w-16 fontColorRed" viewBox="0 0 512 512" ><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg></td>
<td>2021-03-29</td>
<td>Un nouveau commentaire à été ajouté</td>
<td>Victor Morin</td>
</tr>
<tr>
<td></td>
<td>2021-03-29</td>
<td>Une nouvelle photo à été ajouté</td>
<td>Victor Morin</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><button type="button" class="btn btn-primary primaryTop">Voir toutes les notificationsx</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div className="producteure-dashboard-box">
<div class="row">
<div class="col-md-12">
<div id="grid" class="row">
<div class="col-md-6 col-6">
<div>
<div class="producteure-dashboard-grid-item">
<img src={Producteurs} class="img-responsive" alt="workimg" />
<p>Producteurs</p>
</div>
</div>
</div>
<div class="col-md-6 col-6">
<div>
<div class="producteure-dashboard-grid-item">
<img src={Carnetdenote} class="img-responsive" alt="workimg" />
<p>Carnet de note</p>
</div>
</div>
</div>
<div class="col-md-6 col-6">
<div>
<div class="producteure-dashboard-grid-item">
<img src={Settings} class="img-responsive" alt="workimg" />
<p>Settings</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<Footer></Footer>
</div>
</div>
</div>
)
}
}
export default consultantdashboard
【问题讨论】：
-
尝试将按钮的 onClick 包裹在 ES6 箭头函数中 - 即 () => this.onClick()
-
navigation is not working properly。你能详细说明错误或行为吗？ -
嘿 @Incorrect syntax near 你能举个例子吗
-
是的，为类似问题提供了一个可行的解决方案：stackoverflow.com/questions/45246933/…
-
@问题附近的语法不正确是我想用另一个页面导航我该怎么做。你能改变我的代码并给出答案吗？
标签： javascript reactjs react-router jsx