Добрый день. Прохожу сейчас туториал и возник вопрос. Имеется какой-то объект с новостями myNews, у компонента App создано состояние с этими новостями, а компоненту Add передаем функцию в пропс, которая имеет доступ к новостям. Новая новость добавляется в объекст myNews, но она пустая.
Компонент App:
class App extends React.Component {
state = {
news: myNews
};
handleAddNews(newPost) { //1
const nextNews = [newPost, ...this.state.news];
this.setState({news: nextNews});
};
render() {
return (
<React.Fragment>
<Add newsadd={this.handleAddNews.bind(this, arguments)}/>
<h3>Новости</h3>
<News newsdata={this.state.news} />
</React.Fragment>
)
}
};
Компонент Add:
class Add extends React.Component {
state = {
namestate: '',
textstate: '',
checkstate: false
};
hundleBtnMessage(e) { //2
e.preventDefault();
const {namestate, textstate} = this.state;
this.props.newsadd({namestate, textstate});
};
handleCheckboxChange(e) {
return this.setState({checkstate: e.currentTarget.checked});
};
handleChange(e) {
const {id, value} = e.currentTarget;
return this.setState({[id]: e.currentTarget.value});
};
handleChangeText(e) {
return this.setState({textstate: e.currentTarget.value});
};
validate() {
const { namestate, textstate, checkstate } = this.state;
if (namestate.trim() && textstate.trim() && checkstate) {
return true;
}
return false;
}
render() {
const { namestate, textstate, checkstate } = this.state;
return (
<form className='add'>
<input
id='namestate'
type='text'
className='add__author'
placeholder='Ваше имя'
onChange={this.handleChange.bind(this)}
value={namestate}
/>
<textarea
id='textstate'
className='add__text'
placeholder='Текст новости'
onChange={this.handleChange.bind(this)}
value={textstate}
></textarea>
<label className='add__checkrule'>
<input type='checkbox'
onChange={this.handleCheckboxChange.bind(this)}/>
Я согласен с правилами
</label>
<button
className='add__btn'
onClick={this.hundleBtnMessage.bind(this)}
disabled={!this.validate.call(this)}>
Показать alert
</button>
</form>
)
}
};
Add.propTypes = {
newsadd: PropTypes.func.isRequired,
}
};
Простой
