6.6 KiB
6.6 KiB
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