显示在 ReactJS 中显示模态的按钮列表 [英] Showing list of buttons displaying modals in ReactJS

问题描述

我在显示按钮列表时遇到问题，其中每个按钮都会显示一个弹出窗口.我已经采取了反应模式(https://github.com/reactjs/react-modal)组件并能够在单击按钮时显示单个弹出窗口，但是我将如何为按钮列表执行此操作?我已经阅读了 refs 集合，但似乎无法通过 refs 名称更改 props 集合访问和组件?

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?

有一个显示按钮:

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

openModal 函数:

openModal function:

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

但是我应该如何为特定按钮实例设置状态值?我可以通过给每个 isOpened 状态值指定特定名称:isOpened-1、isOpened-2 等等，但我想这不是正确的方法.我只是在学习 ReactJS.

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.

推荐答案

如果我明白你想要什么，你可以尝试这样的事情:

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

然后

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

这篇关于显示在 ReactJS 中显示模态的按钮列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！