特定のボタンの上にdivタグのテキストを動的に設定できません

Question

こんにちは私はRoundedButtonを持っていますが、そこにはテキストが動的に設定されるべきdivタグがあります。

App.jsが表示されている場合は、このコンポーネントを3回再利用しました。ユーザーが任意のボタンをクリックすると、そのボタンの上に「ユーザーが選択した」テキストが表示されます。現在、どのボタンをクリックしていても、最初のボタンの上に表示されています。

RoundedButton.js

class RoundedButton extends Component { 
    constructor(props) { 
    super(props); 
    } 

    _handleButtonClick(item) { 
    this.props.clickitem(item.buttonText); 
    //document.getElementById("who_played").innerHTML = "User selected"; 
    } 

    render() { 
    let buttonText = this.props.text; 
    return (
     <div className="WhoPlayed"> 
     <div id="who_played" style={{ marginLeft: 5 }} /> 
     <div> 
      <button 
      type="button" 
      className="Button" 
      onClick={this._handleButtonClick.bind(this, { buttonText })} 
      > 
      {buttonText} 
      </button> 
     </div> 
     </div> 
    ); 
    } 
} 

export default RoundedButton; 

App.js

import React, { Component } from "react"; 
import logo from "./logo.svg"; 
import "./App.css"; 
import RoundedButton from "./RoundedButton"; 
import { connect } from "react-redux"; 
import { bindActionCreators } from "redux"; 
import * as actions from "./actions/index"; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     score: 0, 
     status: "" 
    }; 
    this.clickitem = this.clickitem.bind(this); 
    } 

    clickitem(user) { 
    var url = "http://localhost:4000/generate-random"; 
    document.getElementById("who_played").innerHTML = "User selected"; 
    fetch(url) 
     .then(response => { 
     if (response.status >= 400) { 
      throw new Error("Bad response from server"); 
     } 
     return response.json(); 
     }) 
     .then(data => { 
     var computer = data.item; 
     if (
      (user === "Rock" && computer === "Scissors") || 
      (user === "Paper" && computer === "Rock") || 
      (user === "Scissors" && computer === "Paper") 
     ) { 
      this.props.increment(); 
     } else if (user === computer) { 
      this.props.doNothing(); 
     } else { 
      this.props.decrement(); 
     } 
     }); 
    } 

    render() { 
    return (
     <div className="CenterDiv"> 
     <div className="AppTitle"> 
      <b>Score: {this.props.score}</b> 
      <div> 
      <RoundedButton text="Rock" clickitem={this.clickitem} /> 
      <RoundedButton text="Paper" clickitem={this.clickitem} /> 
      <RoundedButton text="Scissors" clickitem={this.clickitem} /> 
      </div> 

      <div className="Status">{this.props.status}</div> 

     </div> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { score: state.score, status: state.status }; 
} 

export default connect(mapStateToProps, actions)(App); 

現状：

期待される状態：

私が間違っていることを誰にでも教えてもらえますか？

Answer 1

掲載のコードにはいくつかの問題があります：

1. レンダリングされたHTMLがid="who_played"とdiv要素をそれぞれ有する3つのRoundedButtonの要素を持っているが。 IDはHTML文書内で一意でなければなりません。これは、テキストが常に最初のボタンの上に表示されているのを見る理由です。 getElementByIdを使用してラベルを設定する場合は、各ボタンに固有のIDを使用します。

2. Reactは宣言的なので、実際にはラベルを設定するためにDOM APIを使用する必要はありません。代わりに状態を使用してください。例として：

   class App extends Component { 
       constructor(props) { 
        super(props); 
        this.state = { 
         score: 0, 
         status: "", 
         selected: "" 
        }; 
        this.clickitem = this.clickitem.bind(this); 
       } 
   
       clickitem(item) { 
        this.setState({ selected: item }); 
        ...rest of code... 
       } 
   
       render() { 
        return (
         <div className="CenterDiv"> 
         <div className="AppTitle"> 
          <b>Score: {this.props.score}</b> 
          <div> 
          <RoundedButton text="Rock" clickitem={this.clickitem} selected={this.state.selected === "Rock"} /> 
          <RoundedButton text="Paper" clickitem={this.clickitem} selected={this.state.selected === "Paper"}/> 
          <RoundedButton text="Scissors" clickitem={this.clickitem} selected={this.state.selected === "Scissors"} /> 
          </div> 
   
          <div className="Status">{this.props.status}</div> 
   
         </div> 
         </div> 
        ); 
       } 
   } 
   
   class RoundedButton extends Component { 
       _handleButtonClick(item) { 
        this.props.clickitem(item.buttonText); 
       } 
   
       render() { 
        let buttonText = this.props.text; 
        return (
         <div className="WhoPlayed"> 
         <div id="who_played" style={{ marginLeft: 5 }}>{this.props.selected? "User Selected": ""}</div> 
         <div> 
          <button 
          type="button" 
          className="Button" 
          onClick={this._handleButtonClick.bind(this, { buttonText })} 
          > 
          {buttonText} 
          </button> 
         </div> 
         </div> 
        ); 
       } 
   }