如何在 ReactJS 中更改按钮文本

Question

当有人单击时如何更改按钮文本？

代码：

<Button disabled={this.state.disabled}
    type="primary"
    htmlType="submit"
    style={{
      background: '#ff9700',
      fontWeight: 'bold',
      border: 'none',
      float: 'center',
    }}
    loading={this.state.loading}
    onClick={this.enterLoading}
    value="Next"
    id="buttontext"
    onClick="changeText()"
>
    Next 
</Button>

Answer 1

马扬克是对的。

创建一个名为“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 评论。该代码基本上就是我所拥有的。只是提示您不再需要构造函数，也不必再绑定方法。

更新：反应钩子

同样的事情，但有useState钩子。text我没有调用 state 变量，而是使用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>
)

更新：如何添加设置超时

添加更新以回答评论中的问题：“如果我想使用 setTimout 将按钮在 1 秒后返回上一个文本，我将在哪里添加？”

我想到了两种方法：将setTimeout加到changeText函数中或创建依赖于buttonText.

更改文本

你可以直接在这个函数中弹出 setTimeout 。

从此

state = {
  text: "Next"
}

changeText = (text) => {

  this.setState({ text }); 
} 
render() {
const { text } = this.state //destucture state
return (
  <Button 
     onClick={ () => { this.changeText("newtext")}  }> {text} </Button> )...etc

对此

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>
)

我们将initialState变量添加为常量以跟踪“先前的文本”。因为，它永远不应该改变，我们可以在所有大写蛇案例中定义它，就像const INITIAL_STATE你选择的那样。

使用效果

我们仍然需要再次定义该initialState变量，以便我们可以跟踪原始变量。然后我们可以创建一个useEffectReact 挂钩，它允许您“挂钩”变量的更改（这只是 的一部分useEffect，足以让我们进入这里）。

我们可以将效果分解为两个基本部分：效果的主体或回调，效果运行时我们想要做什么以及依赖或触发效果运行的内容。在这种情况下，我们的回调将setTimeout在该超时内设置按钮文本，我们buttonText将触发效果。

效果如下：

return (
    <Button onClick={() => setButtonText("newText")}>{buttonText}</Button>
)

每当状态变量buttonText发生变化时，此效果都会运行。我们开始于

const changeText = (text) => setButtonText(text);

效果运行并检查if. 由于buttonText等于初始状态，条件评估为false，我们终止回调和效果。

当用户单击按钮时，changeText执行并设置更新触发效果的变量的buttonText状态。现在我们再次运行该检查，这次它通过了，所以我们执行.ifsetTimeout

在超时内，我们正在设置状态，因此效果再次运行，这次它失败了，因为我们刚刚将状态更改回initialState.

我建议在那里扔一个调试器或一些日志来跟踪

冗长的解释。这是使用效果方法的整个组件的外观。

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])
}

我type在按钮上添加了，因为这是一个很好的做法。并将“按钮”更改为“按钮”。你当然可以有任何你想要的组件，这更适合复制和粘贴