在React中使用OnClick更改組件狀態

Question

我正在嘗試更改組件的狀態並將其呈現到頁面。

 var navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; class NavbarList extends React.Component { constructor() { super(); this.onClick = this.handleClick.bind(this); } handleClick(event) { const {id} = event.target; console.log(id); if(!navbarValue[id].Status){ {navbarValue.map((obj, index) =>{ if(navbarValue[index].Status){ navbarValue[index].Status = 0; return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li> } })} navbarValue[id].Status = 1; return <li className="active" key={id}><a id={id} onClick={this.onClick}>{navbarValue[id].Category}</a></li> } } render() { return ( <div className="navbar-wrapper"> <div className="container"> <nav className="navbar navbar-fixed-static-top navbar-inverse"> <div className="container"> <div className="navbar-header"> <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> <span className="icon-bar"></span> <span className="icon-bar"></span> <span className="icon-bar"></span> </button> <a className="navbar-brand" href="#">BrandName</a> </div> <div id="navbar" className="collapse navbar-collapse"> <ul className="nav navbar-nav"> {navbarValue.map((obj, index) => { if (obj.Status) return <li className="active" key={index}><a id={index} onClick={this.onClick}>{obj.Category}</a></li> return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li> })} </ul> </div> </div> </nav> </div> </div> )}; }; 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語句，該語句驗證是否必須運行函數並重新渲染元素。

首先，它檢查是否未單擊已經激活的按鈕。 接下來，如果語句在循環中以查找先前的活動元素，則將objects屬性更改為0並渲染為不活動。

最后，將新的active元素渲染為active並將對象屬性設置為1。

Answer 1

將navbarValue放入狀態對象並更新狀態onClick。 您在這里不需要if / else語句。 因為您的組件將在狀態更新時重新呈現。

像這樣： https : //stackoverflow.com/a/45134876/4953199