跳到主要内容
知识地图input:怎样接收用户输入?ArcBlock 体系

你在这里。看看这个问题与其他知识怎样相连。

选择节点前往页面 · 展开后可留在地图中阅读

知识地图沿着连接,读懂一个问题
← AFS 与界面

一个问题

input:怎样接收用户输入?

input 表达一个输入控件;change 表达值的变化。

修改任务标题时,输入控件让人提供新值。但“框内变了”“校验通过”“资源已保存”是三个不同状态。需要明确绑定或动作以及写入权限,才能把编辑变成业务数据。

先认识这些属性

顶层的 type: "input" 选择节点种类;props.type 才选择输入形式,例如文本框;label 告诉人这一栏要填写什么;placeholder 是尚未填写时的提示,不是已经保存的值。下面的例子另用 state.value 表达当前输入值。

change 表达输入发生变化。下面把它连接到校验动作;即使校验通过,也不能据此认定内容已写入业务资源。

读一个结构例子

以下摘自源码注册示例。它展示结构,未在本页运行;示例中的路径和动作需要应用提供。

json
{
  "id": "email-input",
  "type": "input",
  "props": {
    "type": "text",
    "label": "Email",
    "placeholder": "you@example.com"
  },
  "state": {
    "value": ""
  },
  "events": {
    "change": {
      "exec": "/form/.actions/validate",
      "args": {
        "field": "email"
      }
    }
  }
}

这个例子只给出连接结构:它传入了字段名 email,没有展示新的输入值怎样传给校验动作;实现表单时,还要补上目标要求的事件数据或取值绑定。state.value 的空字符串是初始值,不表示用户永远没有输入。

从下往上读也很有用:change 调用 /form/.actions/validate,说明这段连接负责校验;它没有展示保存动作。由此可以看出,控件里的值和业务资源里的值并不是自动相同。

查看 input 的技术文档。

检查一下理解

输入框内容变了,怎样判断任务标题已经保存?

还需查看绑定或保存动作是否成功写入对应资源;输入变化本身只说明界面里的值变了。