显示ReactJS中显示模态的按钮列表

Showing list of buttons displaying modals in ReactJS

本文关键字：显示 按钮 列表 模态 ReactJS      更新时间：2023-09-26

我有一个问题，显示一个按钮列表，每个按钮都会显示一个弹出窗口。我已经采取了react-modal (https://github.com/reactjs/react-modal)组件，并能够在按钮单击上显示单个弹出窗口，但我该如何为按钮列表呢?我读过refs集合，但似乎没有办法改变道具集合访问和组件refs名称?

有一个显示按钮:

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

openModal function: 

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

但是我应该如何为特定的按钮实例设置一个状态值?我可以通过给每个isOpened状态值特定的名称:isOpened-1, isOpened-2等，但我想这不是一个适当的方式。我正在学习ReactJS

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

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>

我在工作的项目中遇到了完全相同的问题。我放弃了寻找合适的解决方案，最后想到了https://github.com/fckt/react-layer-stack。它的主要特性之一——它为每个层(可以是Modal或其他)创建了闭包上下文(use和id属性是for)。

相关文章：