Встретил проблему при подключении в проект модальных окон от bootstrap для react.
При открытии модального окна происходит ошибка: TypeError: context is undefined
Вот мой код:
/*
* Рендер самого приложения
*/
class App extends Component {
constructor(props) {
super(props);
this.state = {
news: my_news,
}
this.setAppState = this.setAppState.bind(this);
}
setAppState(state) {
this.setState(state);
}
render() {
return <div className="App">
<Grid>
<Header/>
<AddNew setAppState={this.setAppState} appState={this.state}/>
<Row className="show-grid">
<h3>Новости:</h3>
</Row>
<Row className="show-grid">
<News data={this.state.news}/>
</Row>
<AllNews data={this.state.news}/>
</Grid>
</div>
}
}
/*
* Регион "Шапка"
*/
class Header extends Component {
render() {
return <div className="header">
<ModalInstance/>
</div>
}
}
/*
* Регион "Подвал"
*/
class Footer extends Component {
render() {
return <div className="footer">
<p>Подвал</p>
</div>
}
}
/*
* Блок с количеством новостей
*/
class AllNews extends Component {
render() {
const all_count = this.props.data.length;
return <div className="AllNews">
<p>Всего новостей: {all_count}</p>
</div>
}
}
/*
* Полный список новостей
*/
class News extends Component {
render() {
const all_news = this.props.data;
const items_news = this.props.data.map(function(item, index) {
return (
<Col sx={12} sm={6} md={4} key={index}>
<div className="news__item">
<p className="news__author"><a href={"/news/"+item.id}>{item.author}</a>:</p>
<p className="news__text">{item.text}</p>
</div>
</Col>
)
});
if (all_news.length > 0) {
return items_news;
} else {
return <div className="message">
<p>К сожалению новостей нет</p>
</div>
}
}
}
/*
* Форма добавления новости
*/
class AddNew extends Component {
constructor(props) {
super(props);
this.addNew = this.addNew.bind(this);
}
addNew() {
//var author = ReactDOM.findDOMNode(this.refs.titleNew).value;
//var text = ReactDOM.findDOMNode(this.refs.descriptionNew).value;
let newState = {
...this.props.appState
}
newState.news.push({
id: newState.news.length+1,
author: '111111111',
text: '2222222222'
});
this.props.setAppState({
...this.props.appState,
news: newState.news
})
}
render() {
return <form>
<FieldGroup
id="titleNew"
key="titleNew"
ref='titleNew'
type="text"
label="Заголовок"
placeholder="Введите текст"
/>
<FieldGroup
id="descriptionNew"
key="descriptionNew"
ref='descriptionNew'
type="text"
label="Описание"
placeholder="Введите текст"
/>
<Button onClick={this.addNew}>
Добавить новость
</Button>
</form>
}
}
/*
* Модальное окно для добавления новости
*/
class ModalInstance extends Component {
constructor(props) {
super(props);
this.state = { showModal: false };
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
close() {
this.setState({ showModal: false });
}
open() {
this.cpntext = 1;
this.setState({ showModal: true });
}
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = (
<Tooltip id="modal-tooltip">
wow.
</Tooltip>
);
return <div>
<Button
bsStyle="primary"
bsSize="large"
onClick={this.open}
>
Добавить новость
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Добавление новости</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Содержимое модалки</h4>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Закрыть</Button>
</Modal.Footer>
</Modal>
</div>
}
}
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
export default App