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

Question

I have a following react component:

 <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> 

I need to toggle the color of <i class="icon-check"></i> when clicking the whole <li>

How can I do that?

Answer 1

Firstly, in react, you don't use class , you use className .

See this for full code: https://codepen.io/pen?editors=0010

Using state, you can change styles/classes/etc

  _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

You can set "changeColor" state on <li> click and your <i> can handle this state. If you change component state React will rerender your component.

<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

I made a simple example for you, it works with a sinle list item Check this out.

If you have a list of items, you need to add a one more component for List itself with onToggleListItem method, which will handle the state change. The state of all list items should be store there. In ListItem component you call the onToggleListItem method with a contact id so you can identify which list item was changed.

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

Answer 4

Make use of a state and change the state on click of 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>