React中如何實現模態框每次打開都是初始界面

 

問題描述如下

 

解決方案：每次點擊打開模態框的時候為，當前模態框設置一個獨立的key值，代碼如下：

  /*
   * 上傳文件的模塊框控制
   * */
  showFileModal = () => {
    this.setState({
      fileVisible: true,
    });
    this.setState({myKey: Math.random()});

  };


//組件代碼
 <Modal
          width={760}
          key = {this.state.myKey}
          title="上傳文檔"
          visible={this.state.fileVisible}
          onOk={this.handleOkFile}
          onCancel={this.handleCancelFile}
        >
          <div>
            <Row>
              <a href="xxxxxx.xlsx">
                <Button className='cq-btn'>下載上傳模板</Button>
              </a>
            </Row>
            <Dragger {...fileUploadProps}>
              <p className="ant-upload-drag-icon">
                <Icon type="inbox"/>
              </p>
              <p className="ant-upload-text">點擊excel或將excel文件拖拽到此區域上傳</p>
            </Dragger>

            <RadioGroup onChange={this.onChange} value={this.state.value}>
              <Radio value={0}>全量</Radio>
              <Radio value={1} >增量</Radio>
            </RadioGroup>
            {resultMessage}
          </div>

        </Modal>