无法在特定按钮的上方动态设置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> 
        ); 
       } 
   }