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

Question

更清楚地说，基本上我想做的就是亚马逊

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

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

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

但现在，当我点击按钮所有3模态弹出。

我是React的新手，我可以用JQuery和Javascript做同样的事情，但我不能在React中做到这一点。

或者有更好的方法来解决这个问题？比起循环和创建3模式弹出窗口，我们可以只创建一个模式弹出窗口，它将显示正在被点击的按钮的特定div的数据吗？

我当前的代码：

App.js，我在其中创建了数组

​

​

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

​

​

如果你们需要更多细节，请告诉我

谢谢你们。

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

​

但当我单击任何按钮时，所有div都会弹出，这就是问题所在

Answer 1

当然，所有的模式都会同时出现。所有的模式都使用完全相同的状态，即this.state.showModal。一旦它获得了true，那么所有的一切都会突然出现。如果你还想有3个这样的情态动词。我建议您将showModal的值设置为JSON值。可能是这样的：

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。只需设置"Product detail“的单个"state”，然后从single Modal读取"state“，然后同时显示它。

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

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

===DEMO: SINGLE MODAL TECHNIQUE===

您也可以只有一个<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