在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