javascript - React：如何仅针对该特定 div 显示模式弹出窗口

问题描述

为了更清楚，基本上我想做的就像亚马逊

会有一堆产品，一旦您单击产品，只有该产品及其详细信息将显示在弹出模式上。

在我的例子中，我在一个数组中存储了 3 个数据，我已经将它映射出来，它创建了 3div 和 3Modal Popup，每个都带有按钮。

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

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

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

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

我当前的代码：

App.js ，我在哪里创建了数组

Product.Js 它被映射到 3div 并且还有模态弹出窗口

让我知道你们是否需要更多详细信息

谢谢你们。

3 使用数组中的数据创建的 div

但是当我点击任何按钮时，弹出所有 div 的弹出窗口，这就是问题所在

标签： javascriptreactjsjsx

当然，所有模态都会同时弹出。所有模态都使用完全相同的状态，即this.state.showModal. 一旦它得到，true那么一切都会弹出。如果您仍然喜欢这样的 3 个模态。showModal我建议你用 JSON 值来做state 的值。也许是这样的：

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。只需设置“产品详细信息”的单个“状态”，然后从单个模态中读取该“状态”，然后同时显示它。

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

就像您的评论一样，因为您一次只需要显示一个模式，那么它会容易得多。我们不需要像上面那样有多个真/假条件。我们可以将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

javascript - React：如何仅针对该特定 div 显示模式弹出窗口

问题描述

解决方案

推荐阅读