Question

更明确地说，基本上我想做的就是像Amazon

会有很多产品，一旦您单击该产品，只有该产品及其详细信息将显示在弹出窗口中。

在我的情况下，我已将3个数据存储在一个数组中，并将其映射出来，从而创建了3div和3Modal Popup，每个按钮都带有按钮。

点击1 div的按钮后，我只希望该模式打开该第一个div。

但是现在，当我单击所有3 Modal Popup按钮时。

我是React的新手，我可以在JQuery和Javascript中做同样的事情，但是我无法在React中实现。

或者有更好的方法吗？就像循环而不是创建3modal弹出窗口一样，我们可以只创建一个模式弹出窗口吗？它将显示单击哪个按钮的特定div的数据？

我当前的代码：

App.js，我在其中创建数组的地方

Product.Js，它被映射到3div中并且还具有模式弹出窗口

让我知道你们是否需要更多细节

谢谢你们。

3 Div是使用数组中的数据进行动态创建的

但是当我单击任意按钮时，会弹出所有div的弹出窗口，这就是问题

Answer 1

当然，所有模态将同时弹出。所有模态都使用完全相同的状态this.state.showModal。一旦获得true，所有内容都会弹出。如果您仍然喜欢这样的3种模式。我建议您使用JSON值使showModal状态的值。也许是这样的：

state = {
    showModal: {}
}

然后使用getModal()函数：

getModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = true;
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

那么对于<Modal/>应该看起来像这样：

<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>

要隐藏模式，您可以按照以下步骤对getModal()进行相反操作：

hideModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = false;//Just different on this
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

如果您仍然有兴趣并在实施时遇到问题，我可以帮助您创建一个有效的演示。因为我并不是真正的测试代码，所以请根据我的经验和快速分析来进行编写。但是，就我个人而言，我喜欢针对这种情况使用一个Modal。只需在“产品详细信息”中设置一个“状态”，然后从单个Modal中读取该“状态”，然后同时显示它即可。

====演示：多种模态元素技术=====

就像您的评论一样，因为您一次只需要显示一个模态，那么它会容易得多。我们不需要像上面那样有多个true / false条件。我们可以使用data.id作为对showModal状态的正确/错误检查，如下所示：

class Product extends Component {
  state = {
    showModal: 0
  };

  getModal = value => {
    this.setState({ showModal: value });
  };

  hideModal = value => {
    this.setState({ showModal: 0 });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data.id)}>Popup</button>

            <Modal
              show={this.state.showModal === data.id}
              onHide={() => this.hideModal(data.id)}
              name={data.name}
            />
          </div>
        ))}
      </div>
    );
  }
}

正在运行的演示：https://codesandbox.io/s/pkjvy72mw0

===演示：单模态技术===

您还可以仅拥有一个<Modal/>元素，如下所示：

class Product extends Component {
  state = {
    showModal: false,
    dataModal: {
      name: ""
    }
  };

  getModal = data => {
    this.setState({ showModal: true, dataModal: data });
  };

  hideModal = () => {
    this.setState({ showModal: false });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data)}>Popup</button>
          </div>
        ))}

        <Modal
          show={this.state.showModal}
          onHide={this.hideModal}
          name={this.state.dataModal.name}
        />
      </div>
    );
  }
}

正在运行的演示：https://codesandbox.io/s/53x7m726xk

React：如何仅显示该特定div的模式弹出窗口

1 个答案: