时间戳

首页 > 解决方案 > 我不断收到“handleColor”不是函数错误

reactjs - 我不断收到“handleColor”不是函数错误

问题描述

我设置的功能有一些问题，我设置为在单击按钮时更改按钮的背景颜色。我在下面的父组件中设置了该功能：

import React, { useRef, useState } from 'react';
import Aside from './Aside';
import Content from './Content';

const Dashboard = () => {
  let asideRef = useRef(null);

  
  const handleColor = color => {
    asideRef.current.style.backgroundColor = color;
  };

  return (
    <div className="d-flex flex-row" id="main_wrapper">
      <Aside handleColor={handleColor} postedRef={asideRef} />
      <Content />
    </div>
  );
};


export default Dashboard;

在子组件中，它以这种方式调用：



import { Link } from 'react-router-dom';
import React, { createRef } from 'react';




class Aside extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btn: true,
      btnEn: true,
      background: '#fff',
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  

 

  handleClick = () => {
    const { btn } = this.state;
    this.setState({
      btn: !btn,
    });
  };

 

  render() {
    const { btn, btnEn, background } = this.state;
    const { handleColor, postedRef } = this.props;
    console.log(this.props);
   

    return (
      <div className="d-flex flex-column asidebar" id="aside_wrapper" style={{ width: '20%', height: '100vh' }}>
        <div className="d-flex  flex-row justify-content-center nav-header">
          <a href="/dashboard" className="brand-logo">
            <picture>
              <img src="https://user-images.githubusercontent.com/25479050/99581983-c1c18e00-29e1-11eb-9bd3-4a53585456cb.png" className="img-fluid img-thumbnail" alt="plaschema logo" />
              <source media="(min-width:650px)" srcSet="https://user-images.githubusercontent.com/25479050/99581983-c1c18e00-29e1-11eb-9bd3-4a53585456cb.png" type="image/svg+xml" />
              <source media="(min-width:465px)" srcSet="https://user-images.githubusercontent.com/25479050/99582047-d736b800-29e1-11eb-92f3-83dce3912e39.png" type="image/svg+xml" />
            </picture>
          </a>
        </div>

        <div className="link_container d-flex flex-column">
          <button type="button" className="buttonTrue" ref={postedRef} onClick={() => { handleColor('#f4f2f6'); }}>
            <Link to="/">
              <i className="lni lni-dashboard" />
              <span className="link_name">Dashboard</span>
            </Link>
          </button>

          <button type="button" className={btnEn ? 'buttonTrue' : 'buttonFalse'}>
            <Link to="/enroll">
              <i className="lni lni-tab" />
              <span className="link_name">Enrollment</span>
            </Link>
          </button>


          <Link className=" icons accreditation-wrapper" to="/accreditation">
            <i className="lni lni-checkbox" />
            <span className="link_name">Accreditation</span>
          </Link>


          <Link className=" icons subscription-wrapper" to="/subscription">
            <i className="lni lni-tab" />
            <span className="link_name">Subscription</span>
          </Link>


          <Link className=" icons service-wrapper" to="/service">
            <i className="lni lni-control-panel" />
            <span className="link_name">Service Usage</span>
          </Link>


          <Link className=" icons report-wrapper" to="/report">
            <i className="lni lni-library" />
            <span className="link_name">Reports</span>
          </Link>
        </div>
      </div>
    );
  }
}


export default Aside;

设置后，每当我单击将其设置为测试的唯一按钮时，我都会不断收到此错误页面handleColor is not a function。现在我想不出可能是什么问题，因为我已经尝试了几种方法来让它工作，但错误仍然存​​在。下面是我试图应用它的组件的代码：

错误页面

期待有帮助的回复。谢谢。该问题已更新以获得更多见解。对于第一次迭代的早期问题，我们深表歉意。

标签： reactjs

解决方案

你错误地引用了handleColor. handleColor不是一个道具，它是一个组件方法，你可以使用likethis.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>

我在这里使用您的一些代码创建了示例示例。看看这个链接

推荐阅读