Как добавить элемент по клику в контейнер на React'e?

Question

[Nikita Shchypylov]

И так, при клике на кнопку я беру значение из state, вставляю его в элемент и хочу добавить в контейнер на странице. Знаю как это сделать на jQuery, но может есть более изящное решение на React?
Код ивента :

submitNote (e) {
	const elem = (
		<div className="elem">{this.state.userInput}</div>
	)
	document.querySelector('.data').append(elem);
}

Answer 1

[Алексей Уколов]

может есть более изящное решение на React?

Конечно есть. Вы в обработчике должны менять state, при изменении state будет вызван метод render и всё автоматически перерисуется. Вообще забудьте про работу с DOM, в этом весь смысл использования React.

class App {
    constructor(props) {
        super(props);

        this.submitNote = this.submitNote.bind(this);

        this.state = {
            userInput: ``,
            shouldShowElem: false,
        };
    }

    submitNote() {
        this.setState({
            shouldShowElem: true,
        });
    }

    render() {
        return (
            <div className="data">
                Input here

                {this.state.shouldShowElem &&
                <div className="elem">{this.state.userInput}</div>
                }

                <button onClick={this.submitNote}>Click Me</button>
            </div>
        );
    }
}

Comments

[Nikita Shchypylov]

Возможно, я не полностью раскрыл идею :)
По нажатию мы должны не показывать блок на основе булеан, а именно вшивать элемент на страницу. Потом я буду сбрасывать state до дефолтного значения, но предыдущий элемент должен остаться. Вообщем, TODO-шка

[Алексей Уколов]

Это дела не меняет. Все изменения DOM должны идти через render() на основании state.
https://github.com/tastejs/todomvc/tree/gh-pages/e...

[Nikita Shchypylov]

Алексей Уколов: Та мне самому бы написать...ладно

[Алексей Уколов]

Ну так пишите, подсматривая в пример. Он для того и сделан. Главное, что нужно усвоить при использовании React, я написал выше.

[Nikita Shchypylov]

Алексей Уколов: Вообщем, сам сделал :)
Теперь при клике на кнопку элементы добавляются в глобальный массив, а в return перед render идет такой цикл:

const notes = [];
		for (let i in notesArray) {
			notes.push(<div className="note-item">{notesArray[i]}</div>);
		}

и уже в render() :

<div className="notes">
							{notes}
						</div>

[Алексей Уколов]

Ну что за глобальный массив, когда есть state и props? Что за куски html в нём, когда весь код отображения должен быть внутри render()?

[Nikita Shchypylov]

Алексей Уколов: согласен, глобальный массив перенёс в state.
А HTML же в render()! Он в render(), но перёд return()

[Алексей Уколов]

А, невнимательно прочитал. Вообще, в React-мире такие вещи пишут так:

<div className="notes">
  {notesArray.map(note => <div className="note-item">{note}</div>)}
</div>

А на самом деле, для .note-item лучше сделать отдельный компонент и рендерить его:

<div className="notes">
  {notesArray.map(note => <Note text={note} />)}
</div>

[Nikita Shchypylov]

Алексей Уколов: Вариант интересный, но зачем вбрасывать логику уже в return? Не должны ли такие процедуры выполняться "за кулисами" ? Похоже на вариант писать функцию в атрибуте, а не делать вызов :)

[Алексей Уколов]

А здесь нет же никакой логики - небольшая обвязка для итерирования только. А дополнительные переменные бывают оверкилом. Я использую и тот и другой вариант, в зависимости от сложности кода, но в данном случае вполне достаточно обычного map in-place.

[Nikita Shchypylov]

Алексей Уколов: Понятно. Хорошего дня :)