Reactでクリックしたアイテムに「アクティブ」クラス属性を追加

Question

「アクティブ」クラス属性をクリックしたアイテムにのみ追加します。これまでのところ私はactiveItemと呼ばれる状態属性を持っている：

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

私はクリック機能内部の真の状態を変更します。

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

activeItemプロパティは、「グローバル」という並べ替えで、特定のアイテムに関連付けられていないを意味します。 Clickイベントが発生すると、「グローバル」プロパティactiveItemはtrueに変更され、activeItemをチェックするすべてのアイテムに対して、すべてがtrueになります。したがって、すべての項目が強調表示されます。

したがって、あなたはあなたが有効または多分より「reactish」の方法でそれを行うとされていた項目のidをチェックする必要があり、ローカル状態

Answer 2

を各項目ごとに別々のコンポーネントを作成して管理する必要があります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が「アクティブ」であるかどうかを検出するために：

私はtemplate literal内conditional ternaryを挿入しました。三元は、特定のサブコンポーネントのnotebookIdの値が、コンポーネントの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) 
    }) 
    } 
}