React.js (3) Добавляем интерактивность.

Все статьи по React.js

Добавляем кнопку к нашему приложению. Для этого в файле Articles.js добавили - выделено красным:

import React from 'react'

function Article(props) {
  const {article} = props
  const body = <section>{ article.text }</section> 
 return(
      <div>
        <h2>
          { article.title }
          <button onClick={handleClick}>close</button>
        </h2> 
        { body }
        <h3>
         "creation date : "{ (new Date(article.date)).toDateString()}
        </h3>
      </div>
    );
}
function handleClick() {
  console.log('---', 'clicked')
}

export default Article

Мы добавили кнопку и "проверочную" функция, которая при клике выведет в консоль:

Теперь самое время подумать, как мы будем открывать и закрывать текст статьи этой кнопкой.

В мире реакта мы используем декларативное программирование. То есть мы не описываем что нужно убрать этот текст или напротив - добавить текст в HTML. Мы описываем состояние компонента. И наши объекты могут находиться в различных состояниях. В нашем случае это состояния с открытым и закрытым текстом.

Мы опишем эти состояния, а кнопка будет нам помогать переходить из одного состояния в другое. Именно нажатие на кнопку будет изменять состояние компонента.

Для того, чтобы описывать состояния компонента, нам недостаточно использовать такой простой синтаксис описания компонента в виде функции. Такой синтаксис подходит только для очень простых компонентов, которые имеют небольшую часть логики Stateless компоненты.

Для того, чтобы добавить описание состоянию компонента нам придется использовать второй синтаксис с использование классов ES6:

Для этого нам понадобится базовый компонент реакта - изменяем первую строку "импорта":

import React, {Component} from 'react'

class Article extends Component {
  render() {
    Cюда весь код функции Article без объявления
  }
}

Единственное что - наши props. Для них следует добавить - this.props, потому как они уже не будут приходить как аргумент, а будут частью компонента - Component, расширением коего и является наша функция Article

Проверим. Ничего не должно измениться на нашем сайте.

Теперь нам нужно добавить состояние. Для этого внутри компонента мы создадим конструктор в котором зададим начальное состояние

import React, {Component} from 'react'

class Article extends Component {
  // constructor(props) {
  //   super(props)

  //   this.state = {
  //     isOpen: true
  //   }
  // }
state = {
  isOpen: true
}

  render() {
      const {article} = this.props
      console.log('---', this.props)
      const body = <section>{ article.text }</section> 
    return(
      <div>
        <h2>
          { article.title }
          <button onClick={handleClick}>close</button>
        </h2> 
        { body }
        <h3>
          "creation date : "{ (new Date(article.date)).toDateString()}
        </h3>
      </div>
    );
  }
}



function handleClick() {
  console.log('---', 'clicked')
}

export default Article

Красным цветом мы описали состояние компонента по старому. А ниже, зеленым, описали то же самое, но новым стилем. Поэтому все что красное - можно смело закомментировать. Это совершенно эквивалентные записи просто короткая запись с экспериментальным синтаксисом.

Теперь, нам нужно использовать это состояние. Мы будем его использовать там, где мы создали переменную body и скажем. что если наше состояние активное (isOpen: true), то мы будем показывать эту секцию, а нет - значит рендерить пустоту.

Наше состояние храниться в this.state. Это специальный атрибут, наподобие this.props. Ниже написанный код можно выразить так: Если наше состояние isOpen (true), то мы показываем секцию, а если нет, то не показываем.

const body = this.state.isOpen && <section>{ article.text }</section> 

для эксперимента мы изменим и изначальное состояние на false.
Теперь если проверить, то наша статья будет скрыта.

Стоит изменить значение isOpen: на true и статья будет открыта (показана на экране).

Теперь нам осталось сделать так, чтобы изменять состояние.

для смены состояний есть специальный метод ,code>this.set state. Но для того, чтобы работать с контекстом, нам нужно привязать этот контекст к обработчику. существует множество способов как это сделать.

<button onClick={handleClick.bind(this)}>close</button>

Но так делать не стоит.

Мы можем описать этот метод в конструкторе :

import React, {Component} from 'react'

class Article extends Component {
  constructor(props) {
    super(props)

       this.state = {
      isOpen: true
    }
    this.handleClick = handleClick.bind(this)
  }


  render() {
      const {article} = this.props
      console.log('---', this.props)
      const body = this.state.isOpen && <section>{ article.text }</section> 
    return(
      <div>
        <h2>
          { article.title }
          <button onClick={this.handleClick}>close</button>
        </h2> 
        { body }
        <h3>
          "creation date : "{ (new Date(article.date)).toDateString()}
        </h3>
      </div>
    );
  }
  handleClick = () =>{
    console.log('---', 'clicked')
  }
}

export default Article

Красным цветом - это старый развернутый синтаксис. Его можно смело заменить новым - выделен зеленым цветом. Все красное- из кода можно смело удалить!

Во вновь добавленную функцию (зеленым) мы добавили проверочный вывод в консоль. и this.setState() в которую мы передали объект у которого мы задаем новое состояние isOpen = true или isOpen = false, но мы можем отталкиваться от предыдущего состояния и изменять его - isOpen: !this.state.isOpen

setState() - операция асинхронная, поэтому там у нас будет старое состояние (!this.state.isOpen).

Таким образом мы с вами добавили кнопку, которая легко изменяет состояние нашего компонента и показывает или скрывает статью нашего приложения.

Осталось только поменять текст на кнопке -вместо надписи кнопки - "close", мы добавим функцию, которая будет изменять текст в зависимости от состояния:

{this.state.isOpen ? 'close' : 'open'}

Файл Article.js полностью:

import React, {Component} from 'react'

class Article extends Component {
      state = {
        isOpen: true
    }

  render() {
      const {article} = this.props
      const body = this.state.isOpen && <section>{ article.text }</section> 
    return(
      <div>
        <h2>
          { article.title }
          <button onClick={this.handleClick}>
            {this.state.isOpen ? 'close' : 'open'}
          </button>
        </h2> 
        { body }
        <h3>
          "creation date : "{ (new Date(article.date)).toDateString()}
        </h3>
      </div>
    );
  }
  handleClick = () =>{
    console.log('---', 'clicked')
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
}

export default Article

Первая часть React