在React中添加「活動」類屬性以點擊物品

Question

我想僅在點擊物品上添加「活動」類屬性。到目前爲止，我已經叫狀態屬性activeItem：

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

我改變狀態設置爲true點擊函數內部：

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

在我的渲染（）方法，我做了如下：

<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

activeItem屬性有點「全局」，這意味着它是與特定項目沒有關聯。發生Click事件時，'global'屬性activeItem更改爲true，這意味着對於您檢查activeItem的每個項目，全部爲true。因此，所有的項目都會突出顯示。

因此，你必須爲每個項目創建單獨的組件和管理地方國家

Answer 2

您應該檢查該項目的id正被激活或可能做的更「reactish」方式使其成爲需要像id和isActive這樣的道具的組件。
點擊後，孩子會向上傳遞給孩子的父母id，這將允許父母將當前活動ID存儲在狀態中。
當父級將使用循環重新呈現子項目時，它將檢查當前活動項目id是否等於當前迭代中當前項目的id。如果是這樣，那麼它會通過兒童的isActive道具作爲true。
這是孩子的責任，相應地自我渲染。

例子：

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

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

Answer 3

我寫的一個組成部分，我相信會滿足您的使用情況。

基本上，檢測從NotebookList一個Notebook是「激活」：

我已經插入了一個conditional ternary內template literal。三元組檢查特定子組件的notebookId值是否等於NotebookList組件的state內的active id值。當使用onClick函數單擊錨點時，會設置active id。

我也創建了使用Lodash的omit函數刪除筆記本（爲了完整性）的方法。

請參閱下文以獲取更多信息。祝一切順利！

// React. 
import React from 'react' 

// Lodash. 
import { 
    omit as lodash_omit 
} from 'lodash' 

// Notebook List. 
class NotebookList extends React.Component { 

    // Constructor. 
    constructor(props) { 

    super(props) 

    // Default Notebooks. 
    const notebooks = { 
     'n1': { 
     title: 'notebook1' 
     }, 
     'n2': { 
     title: 'notebook2' 
     }, 
     'n3': { 
     title: 'notebook3' 
     } 
    } 

    // Constructor State. 
    this.state = { 
     notebooks, 
     active: false 
    } 
    } 

    // Render Notebook List. 
    render() { 

    return (
     <div className="list-group"> 

     {Object.keys(this.state.notebooks).map((notebookId) => { 
      return (
      <a href="#" className={`list-group-item ${this.state.active == notebookId ? 'active' : ''}`} onClick={this.setState({active: notebookId})}> 
      {this.state.notebooks[notebookId].title} 
      <button className="pull-right btn btn-xs btn-danger" type="button" onClick={(event) => this.deleteNotebook({event, notebookId})}> 
       <strong>x</strong> 
      </button> 
      </a> 
     ) 
     }} 

     </div> 
    ) 
    } 

    // Delete Notebook. 
    deleteNotebook = ({event, notebookId}) => { 

    // Prevent Default. 
    event.preventDefault() 

    // Omit Notebook From New State. 
    return this.setState({ 
     notebooks: lodash_omit(this.state.notebooks, notebookId) 
    }) 
    } 
}