javascript - React 我无法关闭价格弹出窗口

Question

我正在构建 React 应用程序，但无法关闭价格弹出窗口。我昨天一整天都尝试了一切，但无法解决这个问题。谁能帮我找出错误吗？

我试图做的是，当您单击每个证券列表中的“价格”按钮时，将打开包含价格列表的弹出窗口。您可以在列表中输入新价格。然后，当您点击关闭按钮时，窗口将关闭，并且每个证券中的证券列表和价目表都会更新。

您可以在https://codesandbox.io/s/github/kikidesignnet/caissa查看我的React应用程序.

Answer 1

根据您的代码逻辑，您的price按钮应该打开另一个组件 <PriceForm>但你没有通过任何toggle方法来关闭它，所以你只需要传递 togglePricePopup作为 Prop (我称之为 onClose )，然后在你的 handleFormSubmit 中调用它:

SingleSecuritybox/index.js

{this.state.showPricePopup ? (
  <PriceForm
    pricelist={this.props.price}
    editCurrentPrice={this.editCurrentPrice}
    onClose={this.togglePricePopup} // new prop
  />
) : null}

PriceForm/index.js

handleFormSubmit = e => {
  // prevents page refreshes on submission
  e.preventDefault();

  // code...

  // passed prop from SingleSecuritybox
  this.props.onClose();
};

<强> codeSandbox