state
вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать this
ключевое слово, чтобы он мог обращаться к свойствам класса (например, state
и props
) внутри области действия метода. Существует несколько способов разрешить доступ к this
методам класса. Один из распространенных способов заключается в том, чтобы явно связать this
в конструкторе, чтобы this
стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал this.handleClick = this.handleClick.bind(this)
для его метода handleClick
в конструкторе. Затем, когда вы вызываете функцию типа this.setState()
внутри вашего метода класса, this
относится к классу и не будет undefined
. Примечание: this
ключевое слово является одним из наиболее запутанных аспектов JavaScript , но он играет важную роль в React. Хотя его поведение здесь совершенно нормальное, эти уроки не являются местом для углубленного обзора this
поэтому, пожалуйста, обратитесь к другим урокам, если приведенное выше смущает! state
которое отслеживает количество элементов. Он также имеет метод, который позволяет вам увеличивать количество этого элемента. Однако этот метод не работает , потому что он , используя this
ключевое слово, которое не определено. Исправьте его, явно привязывая this
к addItem()
в конструкторе компонента. Затем добавьте обработчик кликов к элементу button
в методе рендеринга. Он должен вызывать метод addItem()
когда кнопка получает событие щелчка. Помните, что метод, который вы передаете обработчику onClick
требует фигурных скобок, потому что его следует интерпретировать непосредственно как JavaScript. После того, как вы выполните вышеуказанные шаги, вы сможете щелкнуть по кнопке и увидеть инкремент количества элементов в HTML. MyComponent
должен возвращать элемент div
который обертывает два элемента, кнопку и элемент h1
в этом порядке.'
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", "MyComponent
should return a div
element which wraps two elements, a button and an h1
element, in that order.");'
- text: 'Состояние MyComponent
должно инициализироваться с помощью пары значений ключа { itemCount: 0 }
.'
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("itemCount") === 0, "The state of MyComponent
should initialize with the key value pair { itemCount: 0 }
.");'
- text: Нажатие на элемент button
должно запускать метод addItem
и увеличивать состояние itemCount
на 1
.
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 button
element should run the addItem
method and increment the state itemCount
by 1
."); };'
```