Это форма, в которую мы вводим необходимые данные.
Это "лента новостей", которая отображает наши данные.
У данной задачи есть масса вариантов решения. Мы начнем с канонического варианта: в общем родителе (<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
}
Проверим:
Шаг 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 })
}
...
}
Проверим?
Окей, перед нами отличный кейс (реальный рабочий случай).
Во-первых: мы были почти прилежными учениками и сделали propTypes, для <Article />. Из ошибки сразу понятно: мы не передаем значение author (потому что, мы передаем name).
Во-вторых: мы все же накосячили, и забыли добавить в propTypes для <Article /> свойство id. Хорошо, что кода мало и ошибка сразу нашлась. Не забывайте про перечисление всех свойств в propTypes - это супер шпаргалка.
В-третьих: мы из <Add /> не передаем id и bigText.
Тем не менее, нельзя не отметить, что мы добавили динамики в наше приложение! Новость добавляется, причем счетчик новостей работает (а мы его вообще не трогали). Кто уже празднует - молодец, но кто хочет пофиксить все ошибки и сдать работу на пять - милости прошу в заключительный пункт основного курса.
Работа над ошибками
Я бы хотел, чтобы все это вы пофиксили сами. Но, чтобы не быть автором, который "оп-па, косяк, давайте-ка я отдам это вам на домашку", я все сделаю и опишу. Просто попробуйте. У вас получится. Практика решает. Обязательно всегда практикуйтесь для закрепления материала.
Задача:
добавить в форму добавления textarea для bigText;
передавать author;
передавать id (можно сделать через timestamp (отметку времени в ms): +new Date()). Для обучающего примера будет достаточно;
исправить propTypes в <News />
Решение:
Полный код того, что находится в <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>
