Как изменить отрисованный элемент?

Question

[Fierfoxik]

В приложении есть компонент <inputs /> в котором лежат инпуты и поле для загрузки картинки.
При нажатии кнопку добавить мы берем все данные из полей , генерируем id и передаем через пропсы родителю <Inputs container/>, который подключен к store и передает в него все данные.

Компонент родитель <bookList/> принимает id элемента и передает его компоненту <book/> который уже отрисовывает каждый элемент.

Необходимо каким то образом сделать возможность изменить элемент.
В голову пока пришла только идея взять все данные из блока и передать в<inputs/> через store
Но по поводу реализации возникают сомнения, может кто подсказать как это бы лучше реализовать?

Comments

[Никита Гущин]

передаем через пропсы родителю

Как-то не очень понятно каким образом вы можете наверх родителю через пропсы передать. Через callback может?

В голову пока пришла только идея взять все данные из блока и передать в через store

Вполне себе как вариант

[Fierfoxik]

Никита Гущин:

Как-то не очень понятно каким образом вы можете наверх родителю через пропсы передать. Через callback может?

Вызываю функцию в которой передаем их вот так родителю, возможно я просто не так выразился)

this.props.addBook({
                id: random.toString(),
                author: this.authorInput.value,
                name: this.nameInput.value,
                imgUrl: this.state.imagePreviewUrl
            });

который принимает их <Inputs addBook={this.props.addBook} />
а далее диспатчит их в store

Вполне себе как вариант

А как быть с самим уже изменением элемента? т.е я принял данные в поля, изменил кнопку добавить на изменить а далее как то надо изменить именно этот элемент, что собственно я совсем не представляю.
Получается мы создаем просто новый объект а не изменяем старый?
Отрисовка и получение данных у меня пока такая

return (
                <div className='book-list clearfix'>
                    {this.props.book.map((el, index) =>
                        (el.name.length === 0 && el.author.length === 0) ? console.log(el) :
                            <div className="book-item" key={index} id={el.id}>
                                <div className="book-item__btn delete-btn" onClick={this.deleteItem}></div>
                                <div className="book-item__btn change-btn" onClick={this.test}></div>
                                <div className="book-item__img">
                                    <img src={el.imgUrl} alt=""/>
                                    <div className="book-item__info">
                                        <div>{el.author}</div>
                                        <div>{el.name }</div>
                                    </div>
                                </div>
                            </div>
                        )}
                </div>

        )

[Никита Гущин]

Fierfoxik:

т.е я принял данные в поля, изменил кнопку добавить на изменить а далее как то надо изменить именно этот элемент, что собственно я совсем не представляю.

Почти ничем этот процесс не отличается от добавления (в плане логики). Есть форма - заполнили ее - жмёте сохранить:

// обязательно создаем новый объект
this.props.saveChanges({
                id: this.props.id, // <------------ У вас уже есть id!
                author: this.authorInput.value,
                name: this.nameInput.value,
                imgUrl: this.state.imagePreviewUrl
            });

Ну и далее делаете нечто подобное:

// это в редьюсере
// items --> все айтемы
const itemsReducer(state, action) {
  switch(action.type) {
    // ...
    case 'CHANGE_ITEM':
      const changedItem = action.payload.item
      return {
        ...state,
        // итерируем по всем айтемам, заменяем тот у которого id совпадает, остальные - не трогаем
        items: state.items.map(item => item.id === changedItem.id ? changedItem : item)
    // ...
  }
}

Вот и вся магия

[Fierfoxik]

Никита Гущин: а как тогда там добавить эти данные в store чтоб компонент подписанный под store не принял данные и не отрендерил их?

при такой записи, у меня компонент просто получает данные и отрисовывает

для этого и нужно иметь массив id + массив элементов содержащий в себе такую структуру {id:25,item:{name:'bla'} ?

[Никита Гущин]

Fierfoxik:

а как тогда там добавить эти данные в store чтоб компонент подписанный под store не принял данные и не отрендерил их?

Что-то я смутно представляю о чем речь... Берете данные из стора, передаете их в компонент. У него (компонента) может быть внутренний state, где вы можете сделать флаг editingIsInProgress, при нажатии на кнопку "изменить" этот флаг ставим в true и показываем форму редактирования. Далее - по схеме выше

[Fierfoxik]

Никита Гущин: ну получается что при нажатии кнопки изменить которая находится в компоненте который подписан на store , нам сначала нужно взять все данные изменяемого элемента и закинуть в store, чтоб в компоненте с полями вставлять эти данные.
Но когда мы добавляем новые данные в store то наш компонент в котором происходят изменения фиксирует что store изменен , получает новые данные и отрисовывает , и получается что элемент который мы хотели изменить просто продублировался.

Answer 1

[Андрей]

при нажатии на кнопку добавить, у тебя должен происходить екшин который принесет данные книги к редьюсеру который вернет новый стейт стора, контейнер книг у тебя должен быть подписан на стор, и именно на массив books, при изменении которого будет перерендериваться компонент, и в рендере просто надо мапить this.props.books

Answer 2

[Роман Александрович]

У вас есть первый несколько вариантов
Первый это прокинуть функцию через пропсы в а затем в и вызывать функцию this.props.myFunk в компоненте передавая необходимые переменные.
Таких образом можно передать данные родителям. Но это не самый красивый способ
Второй способ это использовать редукс. Положить данные при обработке в и вытащить из store в .
И третий вариант это использовать Contex. Самый редко используемый способ на мой взгляд. https://habrahabr.ru/post/266407/ прекрасная статья которая ответит на все вопросы о контексе реакта.

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