Динамически изменяющийся реактивно-модальный контент

Question

У меня проблема с реактивной модой. У меня есть список SingleElement и после клика должно появиться модальное окно с более подробной информацией о кликаемом элементе. JSON с данными хранится как состояние, и изнутри Модал я не могу найти способ получить нужный элемент.

Вот модал внутри render() функция:

        <Modal
            isOpen={this.state.modalIsOpen}
            onAfterOpen={this.afterOpenModal}
            onRequestClose={this.closeModal}
            chosenBeer={this.state.chosenBeer}
        >
            <h2> == Dynamically changing title of element == </h2>
            <button onClick={this.closeModal}>X</button>
            <img src="{ == Dynamically changing image == }" />
        </Modal>

        <div id="splashElements">
        {
            this.state.elements &&
            this.state.elements.map((item, index) => {
                return(<SingleElement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} onDelete={id => this.onDelete(index)} openModal={elementId => this.openModal(index)}/>)
            })
        }
        </div>

А вот методы, отвечающие за показ / скрытие модального окна:

openModal = (beerId) => {
    this.setState({modalIsOpen: true, chosenBeer: this.state.beers[beerId]});
}

afterOpenModal = () =>{
    // references are now sync'd and can be accessed.
}

closeModal = () => {
    this.setState({modalIsOpen: false});
}

Answer 1

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

То, что я хотел бы сделать, - это добавить функцию listItem, которая захватывает выбранный элемент и отправляет его в пользовательский модальный компонент многократного использования...

onClick={() => this.handleClick(item)}

handleClick(item) {
 //You would need to create a reusable modal component and import it.
return (
<ReusableModalComponent item={item}
)

}

Затем в вашем ReusableModalComponent вы можете получить доступ ко всему из списка через this.props.item.src... и т. Д.

Обновите ваш пример, чтобы ваш код работал как есть...

this.state.elements.map((item, index) => {
            return(<SingleElement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} onDelete={id => this.onDelete(index)} openModal={elementId => this.openModal(index)} onClick={() => this.setState({itemToShow: item, modalIsOpen: !this.state.modalIsOpen}) />)
        })

Затем, ссылка this.state.itemToShow.etc внутри вашего модального

Answer 2

Итак, насколько я понимаю, u визуализировал каждый элемент в state.elements и каждый <SingleElement/> Компонент имеет кнопку, и при нажатии на эту кнопку вы хотите открыть модальное окно, в котором будет отображаться значение одного элемента

похоже, что каждая кнопка будет использовать метод openModal. с помощью этого метода мы должны сделать 2 вещи. сначала изменитеthis.state.modalIsOpenvalue и передать динамическое значение в модальное тело. для этого сначала я покажу вам магию javascript. В javascript

    !!undefined=false
    !!anystring=true  // pretty clear I believe

Итак, первый шаг, this.state.modalIsOpen:undefinedдолжен быть установлен так. магия начнется на третьем шаге.

На втором шаге вы должны передать это значение компоненту singleModal. в вашем родительском компоненте u также визуализирует компонент, который включает Modal, поэтому я назову его**singleModal**.

        <singleModal
          modalIsOpen={this.state.modalIsOpen} //i just show the related prop here. 
        />

третий шаг в модальном компоненте, я считаю, что это компонент функции без сохранения состояния. изначально в состоянии modalIsOpen значение былоundefined. так что с магией javascript !!props.modalIsOpenустановлено значение false. поэтому модальное окно не отображается.

На четвертом шаге метод openModal активирует модальное окно.

    openModal = (beerId) => {
    this.setState({modalIsOpen:this.state.elements[beerId] ,    chosenBeer:this.state.beers[beerId]});
      }

вот в чем дело. Поскольку я не знаю макета вашего приложения, я предположил, что beerId совпадает со значением идентификатора ключа внутри каждого<SIngleElement key={} />. поэтому я вытащил единственный элемент внутриthis.state.elements.

вот и вторая часть волшебства. я установил modalIsOpen наthis.state.elements[beerId]. помните, что это значение мы установили для свойства isOpen внутри модального компонента.

           <Modal
            isOpen={!!props.modalIsOpen}
          />

этот раз props.modalIsOpen=this.state.elements[beerId]которая представляет собой строку. так!!props.modalIsOpenбудет истинным, и ваше модальное окно откроется.

Последний шаг, теперь внутри модального

    {props.modalIsOpen && <p>{props.modalIsOpen}</p>}