Блог

У меня возникла некоторая проблема с функцией, которую я настроил для изменения цвета фона кнопки при ее нажатии. Я настраиваю функцию в родительском компоненте ниже:

 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 . Прямо сейчас я не могу понять, в чем проблема, потому что я попробовал несколько подходов, чтобы заставить ее работать, но ошибка все еще существует. Ниже приведен код компонента, к которому я пытаюсь его применить:

С нетерпением жду полезных ответов. Спасибо. Вопрос был обновлен для получения дополнительной информации. Извините за более ранние проблемы с первой итерацией.

вы можете попробовать с

 const handleClick = () => {
 

или

 function handleClick () {
 

Вы ошибочно ссылаетесь на handleColor . handleColor это не prop, это компонентный метод, который вы можете использовать как this.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>

 

Я создал пример примера здесь с некоторыми из вашего кода. Проверьте эту ссылку