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

Question

我在显示一个按钮列表时遇到问题，每个按钮都会显示一个弹出窗口。我使用了 react-modal ( https://github.com/reactjs/react-modal) 组件并且能够在单击按钮时显示单个弹出窗口，但是我将如何为按钮列表执行此操作？我读过有关 refs 集合的信息，但似乎没有办法通过 refs 名称更改 Prop 集合访问和组件？

有一个显示按钮:

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

打开模态函数:

 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>