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