专注于隐藏 div 内部的输入

Focus on input inside hidden div

提问人:Saulo 提问时间:11/12/2023 更新时间:11/12/2023 访问量:58

问:

考虑下面的 Rails 视图:

<div
    data-controller='manager'
    data-manager-target='inputcontainer'
>
  <input
      class='hidden'
      type='text'
      data-manager-target='input'
  >
</div>
<div
    data-manager-target='label'
    data-action='dblclick->manager#show'
>
  double click to show input
</div>

和这段代码:manager_controller.js

show() {
  this.inputcontainerTarget.classList.remove('hidden');
  this.inputTarget.focus();
}

当我双击第二个以显示第一个时,我收到错误。divUncaught TypeError: self.inputTarget is undefined

我理解为什么会发生这种情况,但我正在努力寻找一种方法来让它发挥作用。

有谁知道我怎样才能让它工作?

这是一个 Ruby on Rails 7.1 应用程序,我正在使用 Stimulus 连接前端和 Tailwind 进行样式设置。

JavaScript Ruby-on-Rails 刺激JS

评论


答:

1赞 Alex 11/12/2023 #1
<div data-controller="manager">
  <input class="hidden" type="text" data-manager-target="input">

  <!-- this needs to be inside the `data-controller` div -->
  <div data-action="dblclick->manager#show">
    double click to show input
  </div>
</div>
// app/javascript/controllers/manager_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="manager"
export default class extends Controller {
  // NOTE: you have to declare your targets
  //       this is for `data-manager-target="input"`
  static targets = ["input"];

  show() {
    this.inputTarget.classList.remove("hidden");
    this.inputTarget.focus();
  }
}

注意,不需要 on 元素,可以用 .data-manager-target="inputcontainer"data-controller="manager"this.element

https://stimulus.hotwired.dev/reference/targets