提问人:Saulo 提问时间:11/12/2023 更新时间:11/12/2023 访问量:58
专注于隐藏 div 内部的输入
Focus on input inside hidden div
问:
考虑下面的 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();
}
当我双击第二个以显示第一个时,我收到错误。div
Uncaught TypeError: self.inputTarget is undefined
我理解为什么会发生这种情况,但我正在努力寻找一种方法来让它发挥作用。
有谁知道我怎样才能让它工作?
这是一个 Ruby on Rails 7.1 应用程序,我正在使用 Stimulus 连接前端和 Tailwind 进行样式设置。
答:
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
评论