freeCodeCamp

6.6 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036174	Bind 'this' to a Class Method	6	false		Привязать 'это' к методу класса

Description

В дополнение к настройке и обновлению state вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать this ключевое слово, чтобы он мог обращаться к свойствам класса (например, state и props ) внутри области действия метода. Существует несколько способов разрешить доступ к this методам класса. Один из распространенных способов заключается в том, чтобы явно связать this в конструкторе, чтобы this стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал this.handleClick = this.handleClick.bind(this) для его метода handleClick в конструкторе. Затем, когда вы вызываете функцию типа this.setState() внутри вашего метода класса, this относится к классу и не будет undefined . Примечание: this ключевое слово является одним из наиболее запутанных аспектов JavaScript , но он играет важную роль в React. Хотя его поведение здесь совершенно нормальное, эти уроки не являются местом для углубленного обзора this поэтому, пожалуйста, обратитесь к другим урокам, если приведенное выше смущает!

Instructions

Редактор кода имеет компонент с state которое отслеживает количество элементов. Он также имеет метод, который позволяет вам увеличивать количество этого элемента. Однако этот метод не работает , потому что он , используя this ключевое слово, которое не определено. Исправьте его, явно привязывая this к addItem() в конструкторе компонента. Затем добавьте обработчик кликов к элементу button в методе рендеринга. Он должен вызывать метод addItem() когда кнопка получает событие щелчка. Помните, что метод, который вы передаете обработчику onClick требует фигурных скобок, потому что его следует интерпретировать непосредственно как JavaScript. После того, как вы выполните вышеуказанные шаги, вы сможете щелкнуть по кнопке и увидеть инкремент количества элементов в HTML.

Tests

tests:
  - text: '<code>MyComponent</code> должен возвращать элемент <code>div</code> который обертывает два элемента, кнопку и элемент <code>h1</code> в этом порядке.'
    testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("div").length === 1 && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(0).type() === "button" && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(1).type() === "h1", "<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.");'
  - text: 'Состояние <code>MyComponent</code> должно инициализироваться с помощью пары значений ключа <code>{ itemCount: 0 }</code> .'
    testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("itemCount") === 0, "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.");'
  - text: Нажатие на элемент <code>button</code> должно запускать метод <code>addItem</code> и увеличивать состояние <code>itemCount</code> на <code>1</code> .
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state("itemCount")); }; const second = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("itemCount")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, "Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>."); };'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemCount: 0
    };
    // change code below this line

    // change code above this line
  }
  addItem() {
    this.setState({
      itemCount: this.state.itemCount + 1
    });
  }
  render() {
    return (
      <div>
        { /* change code below this line */ }
        <button>Click Me</button>
        { /* change code above this line */ }
        <h1>Current Item Count: {this.state.itemCount}</h1>
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

6.6 KiB Raw Blame History Unescape Escape