React.js在父级单击时修改子元素

Question

我有以下反应成分：

 <li key={contact.id} class="option contact-item"> <div class="thumbnail"> <a><span>{contact.name.slice(0, 1)}</span></a> </div> <div class="text"> <div class="label"> <div class="name">{contact.name}</div> <div class="status">{contact.status}</div> </div> <div class="select-container"> <div class="select"> <i class="icon-check"></i> </div> </div> </div> </li> 

单击整个<li>时，我需要切换<i class="icon-check"></i>的颜色

我怎样才能做到这一点？

Answer 1

首先，在react中，您不使用class ，而是使用className 。

参见完整代码： https : //codepen.io/pen?editors=0010

使用状态，您可以更改样式/类/等

  _handleClick(key) {
    let clicked = this.state.myList.filter(f => f.id === key)[0];
    this.setState({ clicked: clicked });
  }

  _changeColor(key) {
    if (this.state.clicked.id === key) {
      return 'icon-checked';
    }
    else 
      return 'icon-check';
  }

  _renderList() {
    return this.state.myList.map(contact => (
      <li key={contact.id} 
        onClick={() => this._handleClick(contact.id)}
        className="option contact-item">
        <i className={this._changeColor(contact.id)}></i>
        {contact.name}
      </li>
    ));
  }

  render() {
    return (
      <div>
        <h1>Hello</h1>
        <ul>
          {this._renderList()}
        </ul>
      </div>
    );
  }

Answer 2

您可以在<li>单击上设置“ changeColor”状态，您的<i>可以处理此状态。 如果您更改组件状态，React将重新渲染您的组件。

<li onClick={this.changeColor()} key={contact.id} className="option contact-item">
<div className="thumbnail">
    <a><span>{contact.name.slice(0, 1)}</span></a>
</div>
<div className="text">
    <div className="label">
        <div className="name">{contact.name}</div>
        <div className="status">{contact.status}</div>
    </div>
    <div className="select-container">
        <div className="select">
            <i className="icon-check" style={if (this.state.colorChanged) {color: 'red'}}></i>
        </div>
    </div>
</div>

changeColor() {
   this.setState({colorChanged: true});
} 

Answer 3

我做了一个简单的例子，对你来说，它与一个sinle列表项工程检查这个出来。

如果有项目列表，则需要使用onToggleListItem方法为List本身添加一个以上的组件，该组件将处理状态更改。 所有列表项的状态都应存储在此处。 在ListItem组件中，使用联系人id调用onToggleListItem方法，以便您可以确定更改了哪个列表项。

handleButtonClick() {
    this.props.onToggleListItem(this.props.contact.id);
}

Answer 4

使用状态和改变的点击状态li

 var Hello = React.createClass({ getInitialState() { return { colorClass: '' } }, toggleClass() { if(this.state.colorClass == '') { this.setState({colorClass: 'someColor'}); } else { this.setState({colorClass: ''}); } }, render(){ return ( <div> <li onClick={this.toggleClass}> Some text <i className={"icon-check " + this.state.colorClass}>value</i> </li> </div> ); } }) ReactDOM.render(<Hello />, document.getElementById('app')); 

 .someColor { color: yellow; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"></div>