Dynamically changing react-modal content

问题

I have problem with react-modal. I have list of SingleElement and after click it should appear modal window with more details of clicked element. JSON with data is stored as state and from the inside of Modal I can't find way to get desired element.

Here's the modal inside render() function:

        <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>

And here are methods responsible for showing/hiding modal window:

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});
}

回答1:

You can do this two says. When a menu item is clicked created a function that stores the menu item to the state, then the modal can call directly from the state.

What I would do, is have a function attached to the listItem that captures the selected item and sends it through to a custom reusable modal component...

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

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

}

Then in your ReusableModalComponent you can access everything from the list via this.props.item.src...etc

Update for your example to make your code work as is...

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}) />)
        })

Then, reference this.state.itemToShow.etc inside your modal

回答2:

So what I understand is u rendered each item in the state.elements and each <SingleElement/> component has a button and upon clicking on this button u wanna open the modal will display the value of single element

looks like each button is gonna use openModal method. with this method we have to do 2 things. first change the this.state.modalIsOpen value and pass the dynamic value on to the modal body. for this, first I ll show u a javascript magic. In javascript

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

So first step, this.state.modalIsOpen:undefined should be set like so. magic will start in third step.

second step you have to pass this value to the singleModal component. in your parent component u also render a component that includes Modal so i will name it **singleModal**.

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

third step in the Modal component i believe it is stateless function component. initially in the state modalIsOpen value was undefined. so with javascript magic !!props.modalIsOpen value is set to false. so no modal shows up.

fourth step, openModal method activates the modal.

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

here is the thing Since I dont know layout about your app, I assumed that beerId is same as the key id value inside each <SIngleElement key={} />. so i pulled the single element inside the this.state.elements.

here is the second part of the magic. i set the modalIsOpen to this.state.elements[beerId]. remember that this value is what we set for the isOpen prop inside the Modal component.

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

this time props.modalIsOpen=this.state.elements[beerId] which is a string. so !!props.modalIsOpen will be true and your modal will open.

Last step, now inside the modal

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

来源：https://stackoverflow.com/questions/47857790/dynamically-changing-react-modal-content

标签

javascript

reactjs

react-modal