您好,我有 RoundedButton
,其中我有 div 标签,其中应动态设置文本,在此下方有按钮。
如果你看到 App.js
我已经重复使用了这个组件 3 次。当用户单击任何按钮时,“用户选择”文本应位于该按钮上方。截至目前,无论我点击哪个按钮,它都会显示在第一个按钮的上方。
圆 Angular 按钮.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);
当前状态:
预期状态:
谁能告诉我我做错了什么?
最佳答案
发布的代码有几个问题:
- 呈现的 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> ); } }
关于javascript - 无法在特定按钮上方动态设置 div 标签文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44612356/