【前端骚操作】Mithril超简单表单处理，withAttr用法与实例

withAttr

input 的输入处理，话说还是不要用表单提交数据了，直接 POST 多好。

官网实例

var state = {
    value: "",
    setValue: function(v) {state.value = v}
}

var Component = {
    view: function() {
        return m("input", {
            oninput: m.withAttr("value", state.setValue),
            value: state.value,
        })
    }
}

m.mount(document.body, Component)

注意 input vnode：

m("input", {
    oninput: m.withAttr("value", state.setValue),
    value: state.value,
})

oninput 事件绑定了 m.withAttr("value", state.setValue)，很明显这玩意是一个运行的函数，所以它一定是返回了一个函数，就像这样：document.body.oninput = m.withAttr("value", state.setValue) 其中的 m.withAttr("value", state.setValue) 返回了一个函数：function(e, value) { e.target.value = value }。嗯，大概就是这个意思了。

value 对应 state.value 就没啥好说的了，这样，你修改 state.value 就可以简介修改 input 的 value 了，是不是很酷？

至于这个 state.setValue 你是使用引用的函数，还是直接写在里面的函数，亦或是全局函数，都随你了。

---

参数说明

m.withAttr(attrName, callback, thisArg?)

参数	类型	必选	描述
attrName	String	Yes	标签的属性，常用是 value
callback	any -> undefined	Yes	回调函数
thisArg	any	No	需要绑定的 this
returns	Event -> undefined		返回了一个常规事件函数

---

实例

var state = {
    value: "",
    setValue: function(v) {state.value = v}
}

var Component = {
    view: function() {
        return m("input", {
            oninput: m.withAttr("value", state.setValue),
            value: state.value,
        })
    }
}

var Reset = {
  view() {
    return m('button', {: () => state.value = ''}, '重置')
  }
}

var Show = {
  view() {
    return m('div', `输入内容：${state.value}`)
  }
}

m.mount(document.body, {
  view() {
    return [
      m(Component),
      m(Reset),
      m(Show)
    ]
  }
})

效果：

实例地址：Codepen

欢迎关注，如有需要 Web，App，小程序，请留言联系。