Трафарет не переопределяет компонент, когда изменяется оформленное свойство @state()

Question

Я начал с трафарета сегодня. Следующий код - это все, что у меня есть в моем проекте. Документы говорят, если компонент компонента украшен @state() изменено, компонент будет перерисован.

Любые изменения в свойстве @State() приведут к повторному вызову функции рендеринга компонентов.

Но даже эта простая вещь не работает. Просьба совета.

import {Component, State} from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @State() name:string = 'john';

  changeName(){
    this.name = "Peter";
    console.log('inside changeName');
  }

  render() {
    return <div>
      <p>{this.name}</p>
      <button onClick={this.changeName}>click</button>
    </div>;
  }
}

Когда я нажимаю на кнопку inside changeName зарегистрирован, но без изменений name видно в поле зрения.

Answer 1

Попробуйте изменить свой onClick на функцию стрелки:

<button onClick={() => this.changeName()}>click</button>

Это сохраняет значение this ссылаться на ваш класс. См. https://stenciljs.com/docs/templating-jsx/ для получения дополнительной информации и примеров.

Answer 2

Ответ @matthewsteele правильный, но вы также можете определить свою функцию, как показано ниже, чтобы она работала.

      private changeName = () => {
  this.name = "Peter";
  console.log('inside changeName');
}

Выполнение этой ссылки по-прежнему будет сохраняться в классе.