Javascript 在 Stimulus 控制器中使用的代码重构

Question

如何像这样重构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(', ');
}

使其在 rail's Stimulus 中发挥作用？我对 JS 的经验很少，想有一两个在 Stimulus 控制器中实现 JS 代码的例子，所以我有 material 可以自己重构其他案例。非常感谢。

Answer 1

一个可能的解决方案：

<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(', ');
  }
}

Javascript 在 Stimulus 控制器中使用的代码重构

Javascript code refactor to use in Stimulus controller

javascript

validation

refactoring

ruby-on-rails

stimulusjs