如何在 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”。