無法在特定按鈕的上方動態設置div標籤文本

Question

您好我有RoundedButton其中我有div標籤，其中文本應該動態設置，在此下方有按鈕。

如果您看到App.js我已重複使用此組件三次。當用戶點擊任何按鈕時，「用戶選擇」文本應位於該按鈕的上方。截至目前，無論按下哪個按鈕，它都顯示在第一個按鈕的上方。

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有三個RoundedButton元素，每個有id="who_played"一個div。 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> 
        ); 
       } 
   }