如何在 Observablehq 中创建带有标签的输入字段答案

【问题标题】：How to create an input field with a label in Observablehq如何在 Observablehq 中创建带有标签的输入字段
【发布时间】：2021-10-06 05:00:52
【问题描述】：

我可以使用此代码创建一个输入文本框。在同一行添加标签，同时仍将其绑定到同一个全局变量的最佳方法是什么？

viewof myText = html`<input type="text" value="initial value">

我愿意

viewof myText = html`Enter something: <input type="text" value="initial value">

但 myText 没有绑定到输入字段。

【问题讨论】：

标签： observablehq

【解决方案1】：

获得此效果的最简单方法是使用 Jeremy 的 Inputs notebook，其中包括带标签的文本框。您可以将import 仅将文本框方法添加到您的笔记本中，这可以解决一般问题。

不导入另一个笔记本，最简单的方法是这样的：

viewof myText = {
  let form = html`Enter something: <input type="text" value="initial value">`;
  form.addEventListener('input', e => {
    form.value = e.target.value
  });
  return form;
}

viewof 读取返回给它的 .value 属性，并且此代码将 .value 属性设置为包含的输入的值。当输入元素是单元格中唯一的东西时，viewof 无需任何额外代码即可工作，但如果有多个元素都有值，则用户代码需要告诉笔记本哪个输入提供值。

【讨论】：

【解决方案2】：

目前（2021 年 10 月）Observable Inputs 是向笔记本添加输入元素的首选方式。见introductory notebook and collection

viewof myText = Inputs.text({
  label: "Enter something",
  placeholder: "Text",
  value: "Initial value"
})

【讨论】：