React - 隣接する要素のトグルカラー

Question

私はgameBoardを作成しており、ボタンのdivの背景色を切り替えることができません。トグルは「ボタン」（スタイル付きdiv）の個々のクリックに対して機能しますが、隣のボタンをクリックすると、次のボタンを押して背景色を変更する必要があります。最初のクリックで隣接するボタンを切り替えるにはどうすればよいですか？私は（Changing style of a button on click）のようないくつかの関連記事を読んで、まだこの作業を取得するために苦労してきました -

下記の関連のコードを、 フルコード：https://jsfiddle.net/lydiademi/kt2qgfpr/

TYを！

class App extends React.Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
    color: '#FFF', 
    color_white: true, 
    currentWord: '', 
    board1: [], 
    row1: ["aaafrs","aaeeee","aafirs","adennn","aeeeem"], 
    } 

    this.clicked = this.clicked.bind(this); 
} 

componentWillMount() { 
    let letter1 = ''; 

    this.state.row1.forEach(die => { 
    letter1 = die[Math.floor(Math.random() * 6)].toUpperCase(); 
    if (letter1 === 'Q') { 
     this.state.board1.push("Qu") 
    } else { 
     this.state.board1.push(letter1); 
    } 
    }) 
} 

clicked(event) { 
    //change background color 
    let newColor= this.state.color === "#FFF" ? "#ACCEEC" : "#FFF"; 
    this.setState({ color: newColor }); 
    event.target.style.backgroundColor = newColor; 
} 

render() { 
    return ( 
    <div id="board"> 
     <div className="row"> 
     { 

      this.state.board1.map((letter, index) => { 
      return (
      <div className="btn" onClick={(e) => {this.clicked(e)}}> 
       {letter} 
      </div> 
     ) 
     })} 
     </div> 
) 
} 

Answer 1

問題は次のとおりです。

は、あなたはそのために状態を維持する必要はありません だからコードが

、それが必要として働いている、トグルをBGすべての要素の一つの変数を維持しています。あなたは何ができるか

---

は次のとおりです。

はdata-color

このような

<div className="btn" data-color='#FFF' onClick={(e) => {this.clicked(e)}}> 

追加属性を設定し、data-colorに基づいて、BG色とattrを変更、onClickのこの

clicked(event) { 

    // get current color of element 
    let currentColor = event.target.attributes['data-color'].value; 

    // apply condition based upon currentColor 
    let newColor = currentColor === "#FFF" ? "#ACCEEC" : "#FFF"; 

    // set the bg color 
    event.target.style.backgroundColor = newColor; 

    // change the data-color value to currentColor 
    event.target.setAttribute('data-color' , newColor); 

    // add letter to state.currentWord 
    let letter = event.target.innerText; 
    this.setState({ currentWord: this.state.currentWord + letter }) 
} 

のようなここで働くフィドルへのリンクです：

https://jsfiddle.net/vivekdoshi2/kt2qgfpr/2/