0
我正在嘗試更改組件的狀態並將其呈現給頁面。使用OnClick在React中更改組件的狀態
var navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}];
\t
\t
class NavbarList extends React.Component {
constructor() {
super();
this.onClick = this.handleClick.bind(this);
}
handleClick(event) {
const {id} = event.target;
console.log(id);
\t if(!navbarValue[id].Status){
\t {navbarValue.map((obj, index) =>{
\t \t \t if(navbarValue[index].Status){
navbarValue[index].Status = 0;
\t \t \t \t return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li>
\t \t \t }
\t \t })}
navbarValue[id].Status = 1;
\t \t return <li className="active" key={id}><a id={id} onClick={this.onClick}>{navbarValue[id].Category}</a></li>
\t }
}
\t render() {
\t \t return (
\t <div className="navbar-wrapper">
\t <div className="container">
\t <nav className="navbar navbar-fixed-static-top navbar-inverse">
\t <div className="container">
\t <div className="navbar-header">
\t <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span className="sr-only">Toggle navigation</span>
\t \t <span className="icon-bar"></span>
\t \t <span className="icon-bar"></span>
\t \t <span className="icon-bar"></span>
\t </button>
\t <a className="navbar-brand" href="#">BrandName</a>
\t </div>
\t <div id="navbar" className="collapse navbar-collapse">
\t \t <ul className="nav navbar-nav">
\t \t {navbarValue.map((obj, index) => {
\t \t \t if (obj.Status)
\t \t \t return <li className="active" key={index}><a id={index} onClick={this.onClick}>{obj.Category}</a></li>
\t \t return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li>
})}
</ul>
\t </div>
\t </div>
\t </nav>
\t </div>
\t </div>
\t)};
};
ReactDOM.render(
<NavbarList />,
document.getElementById('root')
);<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
<div id="root"></div>我有handleClick(event) if語句這驗證，如果函數必須運行並重新呈現的元素。
首先它檢查是否已被激活的按鈕沒有被點擊。接下來，如果statment處於循環中以查找以前的活動元素，請將objects屬性更改爲0並呈現爲不活動。
在最後呈現新有源元件，以便活性和對象的集合屬性爲1
而你的問題是......？ – Pineda
如何更改組件，重新渲染爲新值。 – AESTHETICS