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>

点击整个<i class="icon-check"></i>

时，我需要切换<li>的颜色

我该怎么做？

Answer 1

首先，在做出反应时，您不能使用class，而是使用className。

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

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

  _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

您可以设置＆＃34; changeColor＆＃34; <li>点击状态，您的<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

我为你做了一个简单的例子，它适用于单列表项目检查this。

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

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

Answer 4

使用状态并在点击li

时更改状态

＆＃13;

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'));

＆＃13;

.someColor {
  color: yellow;
}

＆＃13;

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

＆＃13;

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

4 个答案: