我想让用户单击一个按钮来更改 div 的内容。我正在创建一个足球阵容，每个按钮代表一个阵型，当他们单击按钮时，div 的内容将更改以代表阵容的阵型。 这是单击按钮之前页面的样子 这就是我希望用户单击 4-3-3 按钮后页面的样子
我尝试这样做是为了检查基础知识是否有效：
const changeText = () => {
document.getElementsById("changer").innerHTML = "you clicked me"
}
<button onClick={changeText()}>4-3-3</button>
<div ref={contentRef} className="col-9" id="changer">
<SoccerLineUp
size={"fill"} //responsive
color={"green"}
pattern={"lines"}
homeTeam={homeTeam}
/>
</div>
但是，当我这样做时，页面是空白的。
这是我的完整代码供参考：
export default function App() {
const [state, setState] = useState({
color: "588f58",
pattern: "lines",
showHomeTeam: false, //idk what this does
homeTeamColor: "f08080",
homeTeamNumberColor: "ffffff",
homeGoalkeeperColor: "d6cb65",
homeGoalkeeperNumberColor: "333333",
nameColor: "ffffff"
});
const [error, setError] = useState(null);
const [homeTeam, setHomeTeam] = useState(
localStorage.getItem("homeTeam") === null
? {
squad: {
gk: null,
df: [],
cdm: [],
cm: [],
cam: [],
fw: []
},
style: {
color: `#${state.homeTeamColor}`,
numberColor: `#${state.homeTeamNumberColor}`,
nameColor: `#${state.nameColor}`
}
}
: JSON.parse(localStorage.getItem("homeTeam"))
);
const [number, setNumber] = useState(1);
const [playerName, setPlayerName] = useState("");
const [playerTeam, setPlayerTeam] = useState("homeTeam");
const [playerPosition, setPlayerPosition] = useState("gk"); //why?
const handlePlayerNameChange = (event) => {
setPlayerName(event.target.value);
};
const handlePlayerPositionChange = (event) => {
setPlayerPosition(event.target.value);
};
const removePlayer = (team, position, id) => {
if (position === "gk") {
setHomeTeam((homeTeam) => ({
...homeTeam,
squad: { ...homeTeam.squad, gk: null }
}));
} else if (position === "df") {
setHomeTeam((homeTeam) => ({
...homeTeam,
squad: {
...homeTeam.squad,
df: homeTeam.squad.df.filter((player) => player.id !== id)
}
}));
};
const addPlayer = () => {
setError(null);
if (playerName === "") {
setError("Player Name required!");
}
else if (1 + homeTeam.squad.df.length + homeTeam.squad.cdm.length >= 11) {
setError("Squad is full!");
}
else {
let playerObj = {
id: nanoid(),
number: number,
name: playerName,
color: `#${state.homeTeamColor}`,
numberColor: `#${state.homeTeamNumberColor}`,
namecolor: `#${state.nameColor}`
};
if (playerPosition === "gk") {
if (homeTeam.squad.gk !== null) {
setError("goal keeper is full!");
} else {
playerObj.onClick = () =>
removePlayer("homeTeam", "gk", playerObj.id);
setHomeTeam((homeTeam) => ({
...homeTeam,
squad: { ...homeTeam.squad, gk: playerObj }
}));
}
} else if (playerPosition === "df") {
if (homeTeam.squad.df.length === 5) {
setError("defence is full!");
} else {
playerObj.onClick = () =>
removePlayer("homeTeam", "df", playerObj.id);
setHomeTeam((homeTeam) => ({
...homeTeam,
squad: {
...homeTeam.squad,
df: [...homeTeam.squad.df, playerObj]
}
}));
}
}
}
setNumber(number + 1);
};
const changeText = () => {
document.getElementsByClassName("changer").innerHTML = "you clicked me"
}
return (
<>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<div className="logoHeader">
<button className="navButton">DreamElevenBuilder</button>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul>
<li><a className="socialIcons" href="a" <FontAwesomeIcon icon={fa} /></a></li>
</ul>
</div>
</div>
</nav>
<div className="containerFluid" >
<div className="row">
<div className="col-2">
<form className="userForm">
<div className="formRow">
<div className="formError">
{error !== null ? (
<div
className="alert alert-danger p-2 m-0"
role="alert"
>
{error}
</div>
) : null}
</div>
<div>
<label htmlFor="playerName"><b>Player Name</b></label>
<input
type="text"
className="form-control"
id="playerName"
placeholder="Player Name"
value={playerName}
onChange={handlePlayerNameChange}
/>
</div>
<fieldset>
<div>
<label className="col-form-label">
<b>Player Position</b>
</label>
<div>
<button onClick={changeText()}>4-3-3</button>
<div className="form-check">
<input
className="form-check-input"
type="radio"
value="df"
id="df"
checked={playerPosition === "df"}
onChange={handlePlayerPositionChange}
/>
<label className="form-check-label" htmlFor="gridRadios1" for="df">
Defence
</label>
</div>
</div>
</div>
</fieldset>
</div>
</form>
<div className="buttonPosition">
<button className="addButton" onClick={addPlayer}>
Add Player
</button>
</div>
<hr />
</div>
<div ref={contentRef} className="col-9" id="changer">
//THIS IS THE DIV I WANT TO CHANGE WHEN THE USER CLICKS THE BUTTON.
<SoccerLineUp
size={"fill"}
color={"green"}
pattern={"lines"}
homeTeam={homeTeam}
/>
</div>
</div>
我对这些值进行了硬编码以获取形态。我想知道这是否会进入innerHTML以使其工作？ 为 4-3-3 阵型硬编码的值
您的代码有 2 个问题：
document.getElementsByIddocument.getElementByIdchangeText您可以执行以下操作：
const changeText = () => {
document.getElementById("changer").innerHTML = "you clicked me";
}
<button onClick={changeText}>4-3-3</button>
<div ref={contentRef} className="col-9" id="changer">
<SoccerLineUp
size={"fill"} //responsive
color={"green"}
pattern={"lines"}
homeTeam={homeTeam}
/>
</div>
此外，如果您想将文本更改为用户生成的内容或清理文本以提高安全性，我建议使用
.innerText