JavaScript代码重构用于刺激控制器

发布于 2025-02-01 23:39:16 字数 360 浏览 5 评论 0原文

如何重构JS代码：

const fileInput = document.getElementById('input');
const p = document.querySelector('p');
fileInput.onchange = () => {
  const selectedFiles = [...fileInput.files];
  p.textContent = selectedFiles.map(s => s.size).join(', ');
}

使其在铁路刺激中起作用？我在JS方面几乎没有经验，并且希望有一个或两个在刺激控制器中实现JS代码的示例，因此我有材料可以自己重构其他情况。非常感谢。

原文

How to refactor JS code like this:

const fileInput = document.getElementById('input');
const p = document.querySelector('p');
fileInput.onchange = () => {
  const selectedFiles = [...fileInput.files];
  p.textContent = selectedFiles.map(s => s.size).join(', ');
}

to make it work in rail's Stimulus?
I have very little experience with JS and want to have one or two examples of implementing JS code in Stimulus controllers, so I have material to refactor other cases on my own.
Much thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忘年祭陌 2025-02-08 23:39:16

一种可能的解决方案：

<div data-controller="file">
  <input type="file" data-file-target="input" data-action="change->file#displayText" id="my-input">
  <output data-file-target="text" for="my-input"></output>
</div>

// filename_controller.js

// Connects to data-controller="file"
export default class extends Controller {
  static targets = ["input", "text"]
  
  displayText() {
    const selectedFiles = [...thisInputTarget.files];
    this.textTarget.textContent = selectedFiles.map(s => s.size).join(', ');
  }
}

One possible solution:

<div data-controller="file">
  <input type="file" data-file-target="input" data-action="change->file#displayText" id="my-input">
  <output data-file-target="text" for="my-input"></output>
</div>

// filename_controller.js

// Connects to data-controller="file"
export default class extends Controller {
  static targets = ["input", "text"]
  
  displayText() {
    const selectedFiles = [...thisInputTarget.files];
    this.textTarget.textContent = selectedFiles.map(s => s.size).join(', ');
  }
}

回复收藏 0 原文

~没有更多了~