- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何在点击时更改按钮文字?
代码:
<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>
最佳答案
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)方法。
同样的事情,但使用 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
关于javascript - 如何在 ReactJS 中更改按钮文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53685140/
我是一名优秀的程序员,十分优秀!