Question

我想根据键上传递的信息来更改列表项的类名。但是显然我做错了。

每次单击时，我想用键更新状态，然后基于此状态，我想将类名设置为active，而激活的CSS应该更改列表项的样式

class Header extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	activeIndex: 0
    }
    this.ChangeColor = this.ChangeColor.bind(this);
  }
  
  ChangeColor(key) {
  this.setState({
  	activeIndex: key
  })
  console.log(this.state.activeIndex)
  }
  
  render() {
  	  return (
   <div id='header' >
   <a href="#default" className="logo">CompanyLogo</a>
    <div id='buttons' >
      <li key = {0} className={this.state.activeIndex==0 ? 'active' : null } onClick = {this.ChangeColor} >Home</li>
      <li key = {1} className={this.state.activeIndex==1 ? 'active' : null } onClick = {this.ChangeColor} >Features</li>
      <li key = {2} className={this.state.activeIndex==2 ? 'active' : null } onClick = {this.ChangeColor}  >How It Works</li>
    </div>
  </div>
  )
  }
}


class App extends React.Component{
	constructor(props){
  	super(props)
  }
  
  render() {
  	return(
    <div>
      <Header />
    </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

#header {
  overflow: hidden;
  background-color: #f4f4f4;
  padding: 20px 10px;
}

#buttons{
  float:right;
}

#buttons > .active {
    background-color: #008CBA; /* Green */
    border-radius: 5px;
    color: white;
    padding: 10px 10px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin: 2px
}

#buttons > li {
    background-color: white;
    border-radius: 5px;
    color: #008CBA;
    padding: 10px 10px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin: 2px
}

#buttons > li:hover {
  cursor: pointer;
}

<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="app"></div>

Answer 1

程序无法运行的原因是，调用ChangeColor时没有传递任何密钥。因此，第一次单击后，您的activeIndex将无法定义。您需要修改这三行，如下所示，以确保ChangeColor知道所单击项目的键。请注意，您不能像这样this.ChangeColor(0)那样直接调用该函数。

  <li key={0} className={this.state.activeIndex == 0 ? 'active' : null} onClick={() => this.ChangeColor(0)} >Home</li>
  <li key={1} className={this.state.activeIndex == 1 ? 'active' : null} onClick={() => this.ChangeColor(1)} >Features</li>
  <li key={2} className={this.state.activeIndex == 2 ? 'active' : null} onClick={() => this.ChangeColor(2)}  >How It Works</li>

Answer 2

您需要将键/索引传递给每个项目的更改颜色功能

onClick = {() => this.ChangeColor(0)}

onClick = {() => this.ChangeColor(1)}

等等。

然后您所做的应会起作用

根据反应上的键更改类名

2 个答案: