【发布时间】：2018-03-03 13:13:02
【问题描述】：
所以，我正在编写一个电子应用程序，有时我需要一个路径名。 在我的渲染器线程（使用 jQuery）上，我有这个代码：
$("#button-that-you-click-for-dialog").click(() => {
electron.remote.dialog.showOpenDialog({properties:["openDirectory"]});
});
从某种意义上说，它的效果很好，对话框完全按照我的预期显示 - 但是当对话框关闭（确定或取消）时，页面重新加载，重置表单中的其他值。我一生都无法弄清楚为什么会发生这种情况。以下是我在平台方面的经验：
Ubuntu 17.04 与 Gnome3
电子 1.7.5/Chrome 58.0.3029.110
节点 8.5.0
为了记录，我什至不在乎我还没有传回价值 - 一旦我修复了这个令人耳目一新的错误，我就会解决这个问题。
我认为这是很多信息，但如果我遗漏了什么，请告诉我
更新：我添加了一个回调来记录我返回的文件路径，但现在窗口在对话框打开时刷新，而不是在它关闭时刷新，这意味着在尝试关闭和 console.log 结果时，它说资源已经关闭或释放（可能是因为窗口刷新）我现在使用的代码：
const electron = require("electron");
$("#dir").click((event) => {
electron.remote.dialog.showOpenDialog({
properties:["openDirectory"]
}, (filepaths) => {console.log(filepaths);});
})
第二次更新：我试过 Siddhesh 的代码，效果很好。现在我需要弄清楚我的 index.html 的哪一部分触发了刷新（事实证明，我的 IDE 上运行着 electron 的 WebGL 控制台消息）
这是完整的代码：
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../common/jquery.min.js"></script>
<meta charset="UTF-8">
<title>BookRipper</title>
<link rel="stylesheet" href="../common/bootstrap.min.css"/>
<link rel="stylesheet" href="../common/bootstrap-grid.min.css"/>
<link rel="stylesheet" href="../common/bootstrap-reboot.min.css"/>
<link rel="stylesheet" href="../common/css/font-awesome.min.css" />
<link rel="stylesheet" href="index.css"/>
<script src="../common/bootstrap.min.js"></script>
<script src="index.js" type="application/javascript"></script>
</head>
<body>
<div class="jumbotron">
<h3 class="display-4" id="title">New Book</h3>
</div>
<footer class="footer clearfix">
<div class="container">
Sample Text
</div>
</footer>
<div class="container">
<form>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-title" class="mt-sm-2">Title</label>
</div>
<div class="col">
<input id="book-title" class="form-control"/>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-author" class="mt-sm-2">Author</label>
</div>
<div class="col">
<input id="book-author" class="form-control"/>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-year" class="mt-sm-2">Year</label>
</div>
<div class="col">
<input type="number" id="book-year" class="form-control" value="2000" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-n" class="mt-sm-2">Number of disks</label>
</div>
<div class="col">
<input type="number" id="book-n" class="form-control" value="1"/>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="dir" class="mt-sm-2">Folder</label>
</div>
<div class="col">
<!-- |||||| This is the button in question |||||| -->
<button id="dir" class="btn">Folder</button>
</div>
</div>
<div class="row mb-2">
<button
type="button"
class="btn btn-link"
data-toggle="collapse"
data-target="#advanced"
onclick="$('#advanced').toggleClass('show'); $('#advanced-icon').toggleClass('fa-plus').toggleClass('fa-minus');">
<i
class="fa fa-plus mr-2"
id="advanced-icon">
</i>
Advanced Settings
</button>
</div>
<div class="collapse" id="advanced">
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="bitrate" class="mt-sm-2">Bitrate</label>
</div>
<div class="col">
<div class="input-group">
<input type="number" id="bitrate" class="form-control" value="24" min="16" max="256" step="4" />
<span class="input-group-addon">kbps</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
index.js：
$ = require('jquery');
$(document).ready(function () {
$("#book-title").keydown(copyTitle).keyup(copyTitle);
function copyTitle() {
document.title = this.value ? this.value : "BookRipper";
$("#title").text(!this.value?"New Book":this.value);
}
const electron = require("electron");
$("#dir").click((event) => {
electron.remote.dialog.showOpenDialog({properties:["openDirectory"]}, (filepaths) => {console.log(filepaths)});
})
});
【问题讨论】：
标签： javascript html node.js electron