コンポーネントの配列の1つのコンポーネントのみを選択するにはどうすればいいですか？

Question

このコードは動作しますが、私のコンポーネントをクリックするだけではわかりません。 が、私はすでに1でそれを変更したとき、私は色を変更することはできません方法を知りたい>将来の答え

import React, { Component } from 'react'; 
 

 

 
export default class Seats extends Component { 
 
    constructor() { 
 
     super() 
 
     this.state = { 
 
      status: false, 
 
     }; 
 
    } 
 
    
 
    changeColor(event) { 
 
     if (this.state.status === false) { 
 
      event.currentTarget.style.backgroundColor = '#D70202'; 
 
      this.state.status = true; 
 
     }else { 
 
      this.state.status = false; 
 
      event.currentTarget.style.backgroundColor = '#0CB607'; 
 
     }   
 
    } 
 
    
 
    render() { 
 
     let array = []; 
 
     for (var i = 0; i < 5; i++) { 
 
      array[i] = i; 
 
     } 
 
     
 
     const list = array.map((d, index) => <div className="seat"  onClick={this.changeColor.bind(this)} key={index}></div>); 
 
     return (
 
      <div> 
 
       {list} 
 
      </div> 
 
     ); 
 
    } 
 
} 
 
    
 

.seat { 
 
    background-color: #0CB607; 
 
    border: 1px solid black; 
 
    height: 90px; 
 
    width: 90px; 
 
}

Answer 1

のためのコンポーネントのおかげで二つの問題がここにありますが、その必要性個別に解決する：

1. 代わりのthis.state.status = true|falseを使用して、あなたはthis.setState({ status: true|false })を使用する必要があります。これにより、再レンダリングが強制されます。

2. あなたの現在のアプローチでは、DOMを直接操作してstyle.backgroundColorを設定するだけで状態を管理しています。これは、次にコンポーネントがレンダリングされるときに吹き飛ばされます。第二の問題に対処するために

、私はあなたがコンポーネントレベルでstateとして操作しているアイテムの配列を格納示唆しています。

JS：

export default class Seats extends React.Component { 
    constructor() { 
    super() 

    const seats = [...Array(5)].map(() => ({ status: false })) 
    this.state = { seats } 
    } 

    handleSeatClick(index) { 
    const seats = this.state.seats 
    const seat = seats[index] 
    seat.status = !seat.status 

    seats[index] = seat 

    this.setState({ seats }) 
    } 

    render() { 
    return (
     <div>{list.map((seat, index) => 
     <div className={`seat ${seat.status ? 'highlight' : ''}`} 
      onClick={this.handleSeatClick.bind(index)} 
     ></div> 
     </div> 
    ) 
    } 
} 

はCSS：一例として、この例では

.seat { 
    background-color: #0CB607; 
    border: 1px solid black; 
    height: 90px; 
    width: 90px; 
} 

.seat.highlight { 
    background-color: #D70202; 
} 

、私たちは、コンポーネントのstateの座席の配列を持続しています。あらかじめ定義された座席リストを取得する場合は、[...Array(5)]...ビットを作成する行を、代わりにpropsから読み込んだり、コールなどから読み込んだ行に置き換えることができます。

シートは、独自の状態で配列として保持されているため、を出力するかどうかを判断することで、CSSクラスを出力するかどうかをカラーで指定することができます。

あなたがリファクタリングできるもう1つのこと（これは明確な説明を保つために行いませんでした）は、.bindを完全にrenderに取り除くことです。これを行うことは反パターンであり、レンダリングするたびにリスト内のすべての項目に対して新しい機能を再作成するためです。