Reactjs 我一直认为handleColor不是函数错误

我设置了一个函数，用于在单击按钮时更改按钮的背景色，但该函数有一些问题。 我在下面的父组件中设置函数：

import React，{useRef，useState}来自“React”；
除了“/除了”之外的导入；
从“./Content”导入内容；
常量仪表板=（）=>{
设asideRef=useRef（null）；
常量handleColor=color=>{
asideRef.current.style.backgroundColor=颜色；
};
返回(
{handleColor（'f4f2f6'）；}>
仪表板
注册
委派
订阅
服务使用
报告
);
}
}
撇开出口违约不谈；

设置完成后，每当我单击设置为测试的唯一按钮时，我都会收到此错误页面

handleColor不是一个函数

。现在我想不出这个问题可能是什么，因为我已经尝试了几种方法让它工作，但错误仍然存在。下面是我试图应用它的组件的代码：

期待有帮助的回应。谢谢 该问题已更新，以获得更多见解。很抱歉，第一次迭代出现了早期问题。

您可以尝试使用

const handleClick = () => {

或

---

您错误地引用了

handleColor

handleColor

不是道具，它是一种组件方法，您可以像

这样使用。handleColor

const { handleColor } = this.props // this is wrong, it's not a prop method
<button type="button" className="buttonTrue" ref={this.colorSwitch} onClick={() => { this.handleColor('#f4f2f6'); // this is right }}>
            <Link to="/">
              <i className="lni lni-dashboard" />
              <span className="link_name">Dashboard</span>
            </Link>
          </button>

---

const{handleColor}=this.props//这是错误的，它不是prop方法
{this.handleColor（'#f4f2f6'）；//这是对的}}>
仪表板

---

我在这里用一些代码创建了示例。检查一下

您缺少的“this”，应该是this.handleColor..您为什么要从

this.props

中使用它，它是

this.handleColor

它是一个遗漏。我完全忘了我应该把它拿走。我应该删除它。对于箭头方法，

bind

是不必要的。上次编辑后的

handleColor

代码没有问题。

const{handleColor}=this.props

是我以前尝试过的一种方法，它不起作用。我本该把那条线移走的，但我忘了。不管怎样，我已经删除了它，但它仍然是同一个错误页面。在删除

const{handleColor}=this.props

之后，您是否可以更新您尝试过的代码？我在这里创建了示例。看看吧，谢谢！现在可以了，问题已经更新了。实际上，涉及到两个组件，而且似乎每当我单击按钮时，我想要的效果都不起作用，因为存在某种形式的重新渲染。它只有在我双击时才起作用。组件是有状态的，所以两种方法都不起作用。我必须执行

handleColor（param）{//some code}

，然后将其绑定到

构造函数中

，并在它停止抛出错误之前使用

this.handleColor（params）

。然而，期望的行为不是我目前所拥有的。是的，它会改变背景，但它会双击而不是单击一次。

const { handleColor } = this.props // this is wrong, it's not a prop method
<button type="button" className="buttonTrue" ref={this.colorSwitch} onClick={() => { this.handleColor('#f4f2f6'); // this is right }}>
            <Link to="/">
              <i className="lni lni-dashboard" />
              <span className="link_name">Dashboard</span>
            </Link>
          </button>