react-course-ru-v2

Добавить новость

Добавить новость

Что такое добавление новости?

  1. Это форма, в которую мы вводим необходимые данные.
  2. Это "лента новостей", которая отображает наши данные.

У данной задачи есть масса вариантов решения. Мы начнем с канонического варианта: в общем родителе (<App/>) будем хранить state с новостями. В компонент <Add /> будем передавать функцию (так как в props мы можем передавать что угодно), которая будет иметь доступ к state с новостями и которая в свою очередь будет добавлять новость в этот state.

Так как state у <App /> будет изменяться, все дети (в том числе и новостная лента <News />) будут перерисованы, а следовательно - мы увидим добавленную новость.


Взаимодействие из ребенка с родителем

Шаг 1: создадим состояние с новостями в <App /> (а следовательно, переделаем App из stateless в statefull):

class App extends React.Component {   state = {     news: myNews, // в начальное состояние положили значение из переменной   }    render() {     return (       <React.Fragment>         <Add />         <h3>Новости</h3>         {/* считали новости из this.state */}         <News data={this.state.news} />       </React.Fragment>     )   } } 

Что примечательно, мы изменили источник данных для <News />, но компонент работает как ни в чем не бывало. Удобно!

Шаг 2: передадим функцию-обработчик в Add

class App extends React.Component {   state = {     news: myNews,   }   handleAddNews = () => {     console.log('я вызвана из Add, но имею доступ к this.state у App!', this.state)   }   render() {     return (       <React.Fragment>         <Add onAddNews={this.handleAddNews} />         <h3>Новости</h3>         <News data={this.state.news} />       </React.Fragment>     )   } } 

Шаг 3: вызовем функцию из <Add />, не забудем про PropTypes.

class Add extends React.Component {   state = {     name: '',     text: '',     agree: false,   }   onBtnClickHandler = (e) => {     e.preventDefault()     const { name, text } = this.state     // alert(name + '\n' + text)     // вызываем вместо alert     this.props.onAddNews()   }   ...   render() {     const { name, text, agree } = this.state     return (       <form className='add'>         ...         <button           className='add__btn'           onClick={this.onBtnClickHandler}           disabled={!this.validate()}>           Показать alert               </button>       </form>     )   } }  Add.propTypes = {   onAddNews: PropTypes.func.isRequired, // func используется для проверки передачи function } 

Проверим:

add news log inside app

Шаг 4: из <Add /> будем передавать объект с новостью.

class Add extends React.Component {   ...   onBtnClickHandler = (e) => {     e.preventDefault()     const { name, text } = this.state     // передаем name и text     // big text у нас отсутствует :(     this.props.onAddNews({ name, text })   }   ... } 

Шаг 5: полученный объект будем записывать на первое место в массиве с новостями в <App />. Разумеется, массив будем обновлять через setState.

class App extends React.Component {   ...   handleAddNews = (data) => {     // сначала мы формируем массив, на основе     // всего того, что уже было в новостях     // и кладем это все в новый массив +      // новую новость кладем в начало массива     const nextNews = [data, ...this.state.news]      // затем обновляем новый массив новостей в this.state.news     this.setState({ news: nextNews })   }   ... } 

Проверим?

add news error

Окей, перед нами отличный кейс (реальный рабочий случай).

Во-первых: мы были почти прилежными учениками и сделали propTypes, для <Article />. Из ошибки сразу понятно: мы не передаем значение author (потому что, мы передаем name).

Во-вторых: мы все же накосячили, и забыли добавить в propTypes для <Article /> свойство id. Хорошо, что кода мало и ошибка сразу нашлась. Не забывайте про перечисление всех свойств в propTypes - это супер шпаргалка.

В-третьих: мы из <Add /> не передаем id и bigText.

Тем не менее, нельзя не отметить, что мы добавили динамики в наше приложение! Новость добавляется, причем счетчик новостей работает (а мы его вообще не трогали). Кто уже празднует - молодец, но кто хочет пофиксить все ошибки и сдать работу на пять - милости прошу в заключительный пункт основного курса.


Работа над ошибками

Я бы хотел, чтобы все это вы пофиксили сами. Но, чтобы не быть автором, который "оп-па, косяк, давайте-ка я отдам это вам на домашку", я все сделаю и опишу. Просто попробуйте. У вас получится. Практика решает. Обязательно всегда практикуйтесь для закрепления материала.

Задача:

  • добавить в форму добавления textarea для bigText;
  • передавать author;
  • передавать id (можно сделать через timestamp (отметку времени в ms): +new Date()). Для обучающего примера будет достаточно;
  • исправить propTypes в <News />

news added

Решение:

Полный код того, что находится в <body /> (с комментариями о последних изменениях)

<body>   <div id="root"></div>   <script type="text/babel">      const myNews = [       {         id: 1,         author: 'Саша Печкин',         text: 'В четверг, четвертого числа...',         bigText: 'в четыре с четвертью часа четыре чёрненьких чумазеньких чертёнка чертили чёрными чернилами чертёж.'       },       {         id: 2,         author: 'Просто Вася',         text: 'Считаю, что $ должен стоить 35 рублей!',         bigText: 'А евро 42!'       },       {         id: 3,         author: 'Max Frontend',         text: 'Прошло 2 года с прошлых учебников, а $ так и не стоит 35',         bigText: 'А евро опять выше 70.'       },       {         id: 4,         author: 'Гость',         text: 'Бесплатно. Без смс, про реакт, заходи - https://maxpfrontend.ru',         bigText: 'Еще есть группа VK, telegram и канал на youtube! Вся инфа на сайте, не реклама!'       }     ];      class Article extends React.Component {       state = {         visible: false,       }       handleReadMoreClck = (e) => {         e.preventDefault()         this.setState({ visible: true })       }       render() {         const { author, text, bigText } = this.props.data         const { visible } = this.state         return (           <div className='article'>             <p className='news__author'>{author}:</p>             <p className='news__text'>{text}</p>             {               !visible && <a onClick={this.handleReadMoreClck} href="#" className='news__readmore'>Подробнее</a>             }             {               visible && <p className='news__big-text'>{bigText}</p>             }           </div>         )       }     }      Article.propTypes = {       data: PropTypes.shape({         id: PropTypes.number.isRequired, // добавили id, это число, обязательно         author: PropTypes.string.isRequired,         text: PropTypes.string.isRequired,         bigText: PropTypes.string.isRequired       })     }      class News extends React.Component {       // удалили старое состояние counter: 0 (старый ненужный код)       renderNews = () => {         const { data } = this.props         let newsTemplate = null          if (data.length) {           newsTemplate = data.map(function(item) {             return <Article key={item.id} data={item}/>           })         } else {           newsTemplate = <p>К сожалению новостей нет</p>         }          return newsTemplate       }       render() {         const { data } = this.props          return (           <div className='news'>             {this.renderNews()}             {               data.length ? <strong className={'news__count'}>Всего новостей: {data.length}</strong> : null             }           </div>         );       }     }      News.propTypes = {       data: PropTypes.array.isRequired     }      class Add extends React.Component {       state = {         name: '',         text: '',         bigText: '', // добавлен bigText         agree: false,       }       onBtnClickHandler = (e) => {         e.preventDefault()         const { name, text, bigText } = this.state // вытащили так же и bigText         this.props.onAddNews({           id: +new Date(), // в id сохраняется количество миллисекунд прошедших с 1 января 1970 года в часовом поясе UTC            author: name, // name сохраняем в поле author           text,           bigText,         })       }       handleChange = (e) => {         const { id, value } = e.currentTarget         this.setState({ [id]: e.currentTarget.value })       }       handleCheckboxChange = (e) => {         this.setState({ agree: e.currentTarget.checked })       }       validate = () => {         const { name, text, agree } = this.state         if (name.trim() && text.trim() && agree) {           return true         }         return false       }       render() {         const { name, text, bigText, agree } = this.state         return (           <form className='add'>             <input               id='name'               type='text'               onChange={this.handleChange}               className='add__author'               placeholder='Ваше имя'               value={name}             />             <textarea               id='text'               onChange={this.handleChange}               className='add__text'               placeholder='Текст новости'               value={text}             ></textarea>             {/* добавили bigText */}             <textarea               id='bigText'               onChange={this.handleChange}               className='add__text'               placeholder='Текст новости подробно'               value={bigText}             ></textarea>             <label className='add__checkrule'>               <input type='checkbox' onChange={this.handleCheckboxChange} /> Я согласен с правилами             </label>             <button               className='add__btn'               onClick={this.onBtnClickHandler}               disabled={!this.validate()}>               Показать alert             </button>           </form>         )       }     }      Add.propTypes = {       onAddNews: PropTypes.func.isRequired,     }      class App extends React.Component {       state = {         news: myNews,       }       handleAddNews = (data) => {         const nextNews = [data, ...this.state.news]         this.setState({ news: nextNews })       }       render() {         return (           <React.Fragment>             <Add onAddNews={this.handleAddNews}/>             <h3>Новости</h3>             <News data={this.state.news}/>           </React.Fragment>         )       }     }      ReactDOM.render(       <App />,       document.getElementById('root')     );    </script>  </body> 

Готово!

на данный момент.

Показать оглавление

Комментариев: 0

Оставить комментарий