Как создать диалоговое окна в React js?

Question

[Keus]

Начал изучать React js и решил создать простое модульное диалоговое окно, взяв за основу JS код из этого примера: plnkr.co/edit/gIVdgTQ5MXKy8a19XKvz?p=preview но не знаю с какого конца браться. Не могу понять как преобразовать обычные выражения JS в React.

У меня есть компонент из которого я хочу вызвать диалоговое окно, по нажатию на кнопку в нем, т.е. запустить диалоговое окно из функции обработки клика. Выглядит примерно так:

// Тут прочий код
.....

// Обработать нажатие на кнопку "Добавить"
	handlerAdd: function(event) {
		event.preventDefault();

                // Когда тупо копирую код из примера, то всё работает.
		var coverDiv = document.createElement('div');
      	        coverDiv.id = 'cover-div';
      	        document.body.appendChild(coverDiv);

                // А вот как это сделать на React не знаю, вставка тэга приводит к ошибке, т.к. я думаю это должно быть 
                // в функции ниже.
               
		var coverDiv= <div className = "cover-div">
		</div>
		document.body.appendChild(coverDiv);
	},

	render : function() {
		return (
			<div className="grid-box">
				<p>{this.state.error}</p>
				<NavPanel onClickAdd = {this.handlerAdd} />
				<Grid />				
			</div>
		);
	}

Comments

[psyhO_octopus]

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

Answer 1

[Пётр]

Тебе при обработке события в handlerAdd надо не создавать div элемент, вставлять react компонент и обновлять его.
Т.е. код должен выглядеть так:

getInitialState: function(){
    return{
        block: null
    }
},

handlerAdd: funcion(){
    this.setState({
        block: <PopUp/>
    });
} 

render : function() {
    return (
        <div className="grid-box">
            <p>{this.state.error}</p>
            <NavPanel onClickAdd = {this.handlerAdd} />
            <Grid />				
            {this.state.block}
        </div>
    );
 }

Где в PopUp будет твой блок cover-div.