Question

我想仅在点击的项目上添加'active'class属性。到目前为止，我有一个名为activeItem的状态属性：

constructor(props) {
    super(props);
    this.state = { clickedNotebookId: '', activeItem: false };
}

我在点击功能中将状态更改为true：

renderContent(event) {
    this.setState({clickedNotebookId: this.props.id, activeItem: true}, function(){
        //display content
    });
}

在我的render（）方法中，我执行以下操作：

<div className="list-group">
    <a href="#" className={this.state.activeItem == true ? 'list-group-item active' : 'list-group-item'} onClick={this.renderContent}>{this.props.title}
    <button className="pull-right btn btn-xs btn-danger" type="button" onClick={this.deleteNotebook}>
        <strong>x</strong>
    </button>
    </a>
</div>

-

className={this.state.activeItem == true ? 'list-group-item active' : 'list-group-item'}

我知道上面的情况是错误的，因为它会在点击时激活所有项目。理想情况下，它应该只突出显示所点击的项目。

Answer 1

您应该检查正在激活的项目的id，或者在更多＆＃34;反应中＆＃34;方式，并将其作为采用id和isActive等道具的组件单击时，子项将向上传递给子项id的父项，这将允许父项将当前活动ID存储在该状态。
当父项将使用循环重新呈现子项时，它将检查当前活动项id是否等于当前迭代中当前项的id。如果是，则它会将isActive道具传递给true 孩子有责任相应地自我渲染。

示例：

＆＃13;

const items = [1, 2, 3, 4, 5];

class MyItem extends React.Component {
  renderContent = e => {
    const { itemId, renderContent } = this.props;
    renderContent(itemId);
  };

  deleteNotebook = e => {
    const { itemId, deleteNotebook } = this.props;
    deleteNotebook(itemId);
  };

  render() {
    const { isActive } = this.props;
    const groupItemClass = `list-group-item ${isActive && "active"}`;
    return (
      <div className="list-group">
        <a href="#" className={groupItemClass} onClick={this.renderContent}>
          {this.props.title}
          <button
            className="pull-right btn btn-xs btn-danger"
            type="button"
            onClick={this.deleteNotebook}
          >
            <strong>x</strong>
          </button>
        </a>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  renderContent = id => {
    console.clear();
    console.log(`rendering content for item id - ${id}`);
    this.setState({ activeItem: id });
  };

  deleteNotebook = id => {
    // do something..
  };

  render() {
    const { activeItem } = this.state;
    return (
      <div>
        {
          items.map((item) => <MyItem renderContent={this.renderContent} deleteNotebook={this.deleteNotebook} itemId={item} isActive={activeItem === item} />)
        }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

＆＃13;

Answer 2

activeItem属性有点像“全球”一样。意味着与特定项目无关。当Click事件发生时，全局＆＃39;属性activeItem已更改为true，这意味着对于您检查activeItem的每个项目，所有项目都将为true。因此，所有项目都会突出显示。

因此，您必须为每个项目创建单独的组件并管理本地状态

在React

2 个答案: