javascript - 在 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 语句，它验证是否必须运行函数并重新渲染元素。

首先，它检查是否没有单击已经处于事件状态的按钮。接下来，如果语句在循环中查找前一个事件元素，请将对象属性更改为 0 并渲染为不活动。

最后将新的事件元素渲染为事件并将对象属性设置为 1。

Answer 1

将 navbarValue 放入状态对象中并更新 onClick 状态。这里不需要 if/else 语句。因为您的组件将在状态更新时重新渲染。

像这样:https://stackoverflow.com/a/45134876/4953199