如何在ReactJS中更改按钮文本

Question

如何在ReactJS中更改按钮文本

15

当有人点击按钮时如何改变按钮文本？

代码：

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

- Jon

5

可以使用状态变量来实现，将按钮文本存储在一个状态变量中，并使用setState更新状态以更改按钮文本。 - Mayank Shukla

@MayankShukla，你能否写一个按钮的代码？ - Jon

1

请检查样例工作代码。 - Mayank Shukla

2个回答

1

在你写"Next"的地方，改为使用以下按钮文本：

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

当 state.disabled == true 时，这将显示“已禁用...”，当 state.disabled == false 时，将显示“下一步”。

- iateadonut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bens Steves · Accepted Answer

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 hook。我正在使用 buttonText 而不是将状态变量称为 text 以更明确地表示。更新后的版本如下：

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

更新: 如何添加setTimeout

为了回答评论中的问题，我们做了一些更新：“如果我想在1秒后使用setTimout将按钮文本恢复到以前的文本，我应该在哪里添加？”

以下有两种方式：将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这样定义它，但是选择权在你。

useEffect

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

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

这就是效果：

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

每当状态变量buttonText发生变化时，这个 effect 就会运行。我们从以下位置开始：

buttonText = initialState // "Next"

该效果运行并检查if。由于buttonText等于初始状态，条件求值为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"，因为这是一个好的做法。并将“Button”更改为“button”。你可以在那里使用任何组件，这样复制和粘贴更为方便。