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

发布的代码有几个问题：

呈现的HTML有三个RoundedButton元素，每个元素都有一个带id="who_played"的div。 ID在HTML文档中应该是唯一的。这就是为什么你看到文本总是出现在第一个按钮上方的原因。如果您确实想使用getElementById设置标签，请为每个按钮使用唯一ID。

由于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>
        );
    }
}

无法在特定按钮的上方动态设置div标签文本

1 个答案: