Question

我有一个问题，显示按钮列表，其中每个按钮都会显示一个弹出窗口。我已经采用了react-modal（https://github.com/reactjs/react-modal）组件并且能够在按钮单击时显示单个弹出窗口，但我如何为按钮列表执行此操作？我读过关于refs集合的内容，但似乎无法通过refs名称更改道具集合访问和组件？

有一个显示按钮：

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

openModal函数：

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

但是我应该如何设置特定按钮实例的状态值？我可以通过给每个isOpened状态值特定名称：isOpened-1，isOpened-2等等，但我猜它不是一个正确的方法。我刚学习ReactJS。

Answer 1

如果我理解你想要的东西，你可以尝试这样的事情：

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>

Answer 2

我在项目中遇到了完全相同的问题。我已经放弃了找到合适的解决方案，最后想出了https://github.com/fckt/react-layer-stack。其中一个主要特性 - 它创建了每个层的闭包上下文（＆＃34;使用＆＃34;和＃34; id＆＃34;属性）（可以是Modal或其他任何东西）。

如果您需要帮助，请与我联系。

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

2 个答案: