Showing list of buttons displaying modals in ReactJS

问题

I have a problem showing a list of buttons where each would display a popup. I have taken react-modal (https://github.com/reactjs/react-modal) component and able to display a single popup on button click, but how would i do it for list of buttons? I ve read about refs collection, but there is seem no way of changing props collection accessing and components by refs name?

Having a show button:

<button type="button" onClick={this.openModal}>Show</button>

openModal function:

 openModal: function(ref) {
   this.setState({isOpened: true});
 }

But how should i set a state value for particular button instance? i can make by giving each isOpened state value particular name: isOpened-1, isOpened-2 and so on, but i guess its not a proper way. Im just learning ReactJS.

回答1:

If I understand what you want, you can try something like this :

constructor(props){
   super(props);
   this.state = {
      modals: {}
   }
}


handleModal(name, event){
    let modals = this.state.modals;

    if(this.state.modals.some(i => i.name === name)){
         let value = this.state.models.filter(f => f.name == name).map(i => i.active)[0];
         modals = [...modals, {name: name, open: !value}];
    }else{
         modals = [...modals, {name: name, open: true}];
    }

    this.setState({modals: modals})
}

And then

<button type="button" onClick={this.openModal.bind(this, "modal1")}>Show</button>

回答2:

I had exactly the same issue in project I'm working on. I've gave up to find the appropriate solution and finally came up with https://github.com/fckt/react-layer-stack . One of the main features - it creates holds the closure context (the "use" and "id" properties is for) for every Layer (could be Modal or anything else).

Contact me if you'll need help with.

来源：https://stackoverflow.com/questions/39805544/showing-list-of-buttons-displaying-modals-in-reactjs

标签

javascript

reactjs

modal-dialog