Question

我有一个折叠组件，它是数组的动态列表。但是，此折叠组件具有“比较”，“编辑”和“删除”三个功能。

编辑路由到正在工作的新屏幕，但是compare是模式（Popup），但问题是当我单击图标时，标志设置为true，但同时刷新屏幕，这会使标志返回到其默认值为false，因此弹出窗口不会打开。有人可以帮我解决问题吗？ TIA

我试图调用shouldComponentUpdate方法，但没有帮助。我正在检查visibleModal的布尔状态值，在这种情况下，如果返回true，则返回false，否则返回true。虽然，我的情况变成了事实，但是我看到页面刷新了。

      recipes = data.map((recipe, i) => {
        return  this.state.dataReceived === true ? ( <div>
          <Col span={24}>
            <Collapse accordion>
              <Panel header={recipe.BASELINE_NAME} >
                {recipe.RUN_BASELINE.map((runs) => (
                <div>
                    <div style={{ marginLeft: "1em", padding: "0.8em", backgroundColor: "#a09f9f", height: "54px", borderRadius: "5px" }}>
                      <Col span={18}>
                        <Icon type="star" style={{ fontSize: "18px" }} /><a href={hrefdata} id={runs} name={recipe.BASELINE_NAME} style={{ marginTop: "-1em", marginLeft: "1em", color: "#fff", fontSize: "18px",fontFamily: "OpenSans" }} onClick={this.run}><strong>{runs}</strong></a>
                      </Col>
                    <Col span={6}>
                      <div style={{ display: "inline-block", marginLeft: "60%" }}>
                        <a href="" onClick={this.showModalNow} name="swap"><Icon type="swap" style={{ color: "#000", fontSize: "18px" }}></Icon></a>
                        <a href={hrefdata1} onClick={this.showCreate} name="edit" id={runs} name={recipe.BASELINE_NAME}><Icon type="edit" style={{ color: "#000", fontSize: "18px", marginLeft: "1em" }}></Icon></a>
                        <a href="" onClick={this.delete} id={runs} name="dash" ><Icon type="delete" style={{ color: "#000", fontSize: "18px", marginLeft: "1em" }}></Icon></a>
                      </div>
                    </Col>
                  </div><br></br>
                </div>
                ))}
                <div style={{ borderStyle: "dotted", marginLeft: "1em", padding: "0.5em", height: "54px", borderRadius: "5px" }}>
                  <a href={hrefdata2} onClick={this.create} id={recipe.BASELINE_NAME} title="Create New Scenario"><strong style={{ fontSize: "18px", marginLeft: "1.5em", fontFamily:"OpenSans",color:"#c7c7c7" }}>CREATE NEW SCENARIO</strong></a>
                </div>

              </Panel>
            </Collapse><br></br>
          </Col>
          <Modal
                  visible={this.state.visibleModal}
                  title="Compare Scenario"
                  style={{ top: 20 }}
                  onCancel={this.handleCancelNow}
                  footer={[
                    <Button key="back" onClick={this.handleCancelNow}>Cancel</Button>,
                    <Button key="submit" type="primary"  onClick={this.handleOk} disabled={this.state.flag}>
                      Compare
                    </Button>,
                  ]}
                >
                  <div style={{ marginTop: "6em" }}>
                  </div>
                </Modal>
        </div>) : (<LoadingSpinner message={"Please wait while we load the data.."}/>)
      }

Answer 1

删除key="submit"会将模态视为一种形式。但是，如果您真的想在中使用它，则功能this.handleOk应该在形式的onSubmit上。 <form onSubmit={e => this.handleOk(e)}> 然后在handleOk函数中，应添加e.preventDefault（）;以防止重新加载页面。请参见下面的示例：

handleOk = e => {
 //Prevent page reload
 e.preventDefault();
...so on

为什么即使我不调用reload（）也会重新加载页面？

1 个答案: