От автора: в этой главе мы расскажем о React js API. Мы рассмотрим три метода: setState(), forceUpdate и ReactDOM.findDOMNode(). В новых классах ES6 мы должны вручную привязать их. Мы будем использовать в примерах this.method.bind(this).
setState
Метод setState() используется для обновления состояния компонента. Этот метод не заменяет состояние, а только добавляет изменения в исходное состояние.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [] } this.setStateHandler = this.setStateHandler.bind(this); }; setStateHandler() { var item = "setState..." var myArray = this.state.data.slice(); myArray.push(item); this.setState({data: myArray}) }; render() { return ( <div> <button onClick = {this.setStateHandler}>SET STATE</button> <h4>State Array: {this.state.data}</h4> </div> ); } } export default App; |
Мы начали с пустого массива. Каждый раз, когда мы нажимаем кнопку, состояние будет обновляться. Если кликнуть на кнопку пять раз, мы получим следующий результат.
forceUpdate
Иногда нам может потребоваться обновить компонент вручную. Это можно сделать с помощью метода forceUpdate().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from 'react'; class App extends React.Component { constructor() { super(); this.forceUpdateHandler = this.forceUpdateHandler.bind(this); }; forceUpdateHandler() { this.forceUpdate(); }; render() { return ( <div> <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button> <h4>Random number: {Math.random()}</h4> </div> ); } } export default App; |
Мы устанавливаем случайное число, которое будет обновляться каждый раз, когда нажимается кнопка.
findDOMNode
Для манипуляций с DOM мы можем использовать метод ReactDOM.findDOMNode(). Сначала нам нужно импортировать react-dom.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { constructor() { super(); this.findDomNodeHandler = this.findDomNodeHandler.bind(this); }; findDomNodeHandler() { var myDiv = document.getElementById('myDiv'); ReactDOM.findDOMNode(myDiv).style.color = 'green'; } render() { return ( <div> <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button> <div id = "myDiv">NODE</div> </div> ); } } export default App; |
Когда нажимается кнопка, цвет элемента myDiv меняется на зеленый.
Примечание. Начиная с обновления 0.14, большинство старых API считаются устаревшими или удаленны для соответствия ES6.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
