如何在 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 ，而是使用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 。

从此

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 INITIAL_STATE meh 你的选择。

使用效果

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

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

效果如下：

useEffect(() => { 
  if(buttonText !== initialState){
    setTimeout(() => setButtonText(initialState), [1000])
  }
}, [buttonText])

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

buttonText = initialState // "Next"

效果运行并检查if 。 由于buttonText等于 initialState，因此条件评估为false ，我们终止回调和效果。

当用户单击按钮时， changeText执行并设置buttonText状态，该状态更新触发效果的变量。 现在我们再次运行if check 并且这次它通过了所以我们执行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 ，因为这是一个很好的做法。 并将“按钮”更改为“按钮”。 你当然可以有任何你想要的组件，这更适合复制和粘贴

Answer 2

在你写“下一步”的地方，按钮文本，改为：

{this.state.disabled ? 'Disabled...' : 'Next'}

我这将在 state.disabled == true 时显示“Disabled...”，当 state.disabled == false 时显示“Next”。