Событие onClick вызывает метод-прототип, проблема с этим - PullRequest
Новая
       8

Событие onClick вызывает метод-прототип, проблема с этим

1 голос
/ 11 октября 2019

Я использую реакцию в моем проекте. Когда button.onClick, я хочу вызвать метод-прототип (this.changeFont), который изменяет стиль шрифта &('body'). Имя fontstyle находится в свойстве прототипа с именем 'valuename'

, но когда я нажимаю кнопку, появляется сообщение об ошибке:

"невозможно прочитать значение со значением undefined".

Это потому, что когда я нажимаю кнопку, «this» становится «событием», а не объектом?

Я пытался var _this = this; и менял to _this.valuename, но ошибка говоритон не может прочитать неопределенный _this. 

function FontClass(name, valuename) {
    this.name = name;
    this.valuename = valuename;
}


FontClass.prototype.changeFont =function(){
    $('body').css("font-family", this.valuename);

}



var fira = new FontClass("Fria", "Fira Code");



const Nav = ({style}) => {


    return( 

        <animated.div className="nav-wrapper" style={style}>
            <div>
            new array=[<button onClick={fira.changeFont}>{fira.name}</button>]
            </div>

            <div>

            </div>

        </animated.div>     

    );

}

1 Ответ

1 голос
/ 11 октября 2019

Может быть, вы можете использовать класс javascript вместо функции и использовать функцию стрелки для связывания this. 

class FontClass {
  constructor(name, valuename) {
    this.name = name;
    this.valuename = valuename;
  }

  changeFont = () => {
    $("body").css("font-family", this.valuename);
  }
}

РЕДАКТИРОВАТЬ 1: Или другой способ - передатьзначение во время вызова функции 

function FontClass(name, valuename) {
    this.name = name;
    this.valuename = valuename;
}


FontClass.prototype.changeFont = function(valuename){
    $('body').css("font-family", valuename);
}



var fira = new FontClass("Fria", "Fira Code");



const Nav = ({style}) => {
    return( 
        <animated.div className="nav-wrapper" style={style}>
            <div>
            new array=[<button onClick={() => fira.changeFont(fira.valuename)}>{fira.name}</button>]
            </div>
            <div>
            </div>
        </animated.div>     
    );
}
...