Mayank 是正确的。
创建一个名为“text”（或您选择的任何内容）的变量，然后将其替换为“Next”。
state = {
text: "Next"
}
changeText = (text) => {
this.setState({ text });
}
render() {
const { text } = this.state //destucture state
return (
<Button
onClick={ () => { this.changeText("newtext")} }> {text} </Button> )...etc
注意：当您单击时，此方法将始终将文本更改为“newtext”。您也可以在此处传递一个变量以使其更具动态性。
希望这会有所帮助。
更新：刚刚看到 Mayank 的评论。该代码基本上就是我所拥有的。只是提示您不再需要构造函数，也不必再绑定方法。
更新：React Hooks
同样的事情，但使用 useState 钩子。我没有调用状态变量text，而是更明确地使用buttonText。更新后的版本如下所示：
import { useState } from 'React';
const [buttonText, setButtonText] = useState("Next"); //same as creating your state variable where "Next" is the default value for buttonText and setButtonText is the setter function for your state variable instead of setState
const changeText = (text) => setButtonText(text);
return (
<Button onClick={() => changeText("newText")}>{buttonText}</Button>
)
您可以同时省略changeText 函数并拥有这个：
return (
<Button onClick={() => setButtonText("newText")}>{buttonText}</Button>
)
更新：如何添加设置超时
添加更新以回答 cmets 中的问题：“如果我想使用 setTimout 将按钮在 1 秒后返回到上一个文本，我应该在哪里添加它？”
想到了两种方法：将setTimeout 添加到changeText 函数或创建依赖于buttonText 的效果。
更改文字
你可以直接在这个函数中弹出 setTimeout。
从这里出发
const changeText = (text) => setButtonText(text);
到这里
const initialState = "Next";
const [buttonText, setButtonText] = useState(initialState); //same as creating your state variable where "Next" is the default value for buttonText and setButtonText is the setter function for your state variable instead of setState
const changeText = (text) => {
setButtonText(text);
setTimeout(() => setButtonText(initialState), [1000])
}
我们将 initialState 变量添加为 const 以跟踪“以前的文本”。因为，它永远不会改变，我们可以在所有大写的蛇形案例中定义它，例如 const INITIAL_STATEmeh 你的选择。
使用效果
我们仍然需要定义 initialState 变量，这样我们就可以跟踪原始变量。然后我们可以创建一个useEffect，它是一个 React 钩子，允许您“钩”到变量的更改中（这只是 useEffect 的一部分，足以让我们进入这里）。
我们可以将效果分解为两个基本部分：效果的主体或回调，效果运行时我们想要做什么以及依赖性或触发效果运行的原因。在这种情况下，我们的回调将是 setTimeout 并将按钮文本设置在该超时内，我们的 buttonText 将触发效果。
效果如下：
useEffect(() => {
if(buttonText !== initialState){
setTimeout(() => setButtonText(initialState), [1000])
}
}, [buttonText])
只要状态变量buttonText 发生变化，这个效果就会运行。
我们从
buttonText = initialState // "Next"
效果运行并检查if。由于buttonText 等于initialState，条件评估为false，我们终止回调和效果。
当用户点击按钮时，changeText 执行并设置buttonText 状态，该状态更新触发效果的变量。现在我们再次运行if 检查，这次它通过了，所以我们执行setTimeout。
在超时期间，我们正在设置状态，因此效果再次运行，这次它失败了，因为我们刚刚将状态改回initialState。
我建议在那里放一个调试器或一些日志来跟踪
冗长的解释。这是使用效果方法时整个组件的外观。
import React, { useState, useEffect } from "react";
const FancyButton = () => {
const initialState = "Next";
const [buttonText, setButtonText] = useState("Next"); //same as creating your state variable where "Next" is the default value for buttonText and setButtonText is the setter function for your state variable instead of setState
// the effect
useEffect(() => {
if(buttonText !== initialState){
setTimeout(() => setButtonText(initialState), [1000])
}
}, [buttonText])
const changeText = (text) => setButtonText(text);
return (
<button type="button" onClick={() => changeText("newText")}>{buttonText}</button>
)
};
我在按钮上添加了type，因为这是一个很好的做法。并将“按钮”更改为“按钮”。你当然可以有任何你想要的组件，这更适合复制和粘贴