javascript - 如何在 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

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 评论。该代码基本上就是我所拥有的。提示您不再需要构造函数，也不必再绑定(bind)方法。

更新:React Hooks

同样的事情，但使用 useState 钩子(Hook)。我没有调用状态变量 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 your choice。

使用效果

我们仍然需要再次定义 initialState 变量，以便我们可以跟踪原始状态。然后我们可以创建一个 useEffect，它是一个 React 钩子(Hook)，允许您“钩住”变量的变化(这只是 useEffect 的一部分，足以让我们去这里)。

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

效果如下:

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

只要状态变量 buttonText 改变，这个效果就会运行。 我们开始于

buttonText = initialState // "Next"

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

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

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

I recommend throwing a debugger in there or some logs to follow the trail

冗长的解释。下面是使用效果方法时整个组件的样子。

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

I added the type on the button because that's a good practice. And changed "Button" to "button". You can certainly have any component there you want, this works better for copying and pasting