我有一个react按钮,我想根据已经显示的文本来改变文本。我如何使用条件语句来实现这个目标?
我有以下代码设置。
buttonClicked() {
}
create() {
return (
<button>X</button>
);
}
很抱歉,如果这真的很简单,我找了很久都没找到,而且我对React很陌生。
在react中使用State,然后为当前值设置一个开关。
export default function App() {
const [buttonText, setButtonText] = useState("My Button");
handleClick = () => {
switch (buttonText) {
case "My Button":
setButtonText("My Button 1");
break;
case "My Button 1":
setButtonText("My Button 2");
break;
case "My Button 2":
setButtonText("Whoops");
break;
default:
setButtonText("My Button");
break;
}
};
return (
<div className="App">
<button onClick={() => handleClick()}>{buttonText}</button>
</div>
);
}
您可以使用JS检查按钮文本 QuerySelector
.
buttonClicked() {
const btn = document.querySelector("#myButton"); // get button elm by id
const text = btn.textContent || btn.innerText; // get button text (the prop is browser-dependant)
// change button text based on condition
if (text === 'X') btn.innerHTML = 'button has X value';
else btn.innerHTML = 'button has another value';
}
create() {
return (
<button id="myButton">X</button>
);
}