如何在cycle.js中将表单字段重置为默认值答案

【问题标题】：How to reset form fields to default value in cycle.js如何在cycle.js中将表单字段重置为默认值
【发布时间】：2016-09-10 20:06:41
【问题描述】：

我有一段代码，使用 cycle.js 和响应式 xstream 库，如下所示。它由一个表单字段组成，其值在提交时呈现在 p 标记中。问题如下： 1、如何在提交表单时将表单的输入域重置为默认值？ 2. 有没有办法在提交后将 input$ 和 submit$ 流重置为初始值？

function formIntent (sourcesDOM) {
  const fNameInput$ = sourcesDOM
    .select('form#user .fname')
    .events('input')
    .compose(debounce(1000))
    .map((e: {target: any}) => e.target.value)

  const submit$ = sourcesDOM
    .select('form#user')
    .events('submit')
    .map((e) => e.preventDefault())
    .mapTo({type: 'USER'})

  const actions$ = xs.combine(fNameInput$, submit$)

  const initState = {fNameInput: ''}

  return actions$
    .map(([fNameInput, {type}]) => {
      return type === 'USER' ? {fNameInput} : initState
    })
    .startWith(initState)
}

function formView (state$) {
  return state$
    .map(({fNameInput}) => 
      div([
        form('#user', [
          label('Name'),
          hr(),
          input('.fname', {attrs: {id: 'first-name', type: 'text', placeholder: 'First name'}}),
          hr(),
          input('.sub', {attrs: {type: 'submit', value: 'Save'}})
        ]),
        div([
          h2('Submitted value'),
          p(fNameInput),
          hr()
        ])
      ])
    )
}

有没有更好的方法来创建这样的表单？附言formIntent 函数的输出被输入到 formView 函数的输入中。

【问题讨论】：

标签： javascript cyclejs xstream-js

【解决方案1】：

这就是我最终要做的。它做了我想要的。我仍然有兴趣了解实现相同目标的更好方法。

function formIntent (sourcesDOM) {
  const fNameInput$ = sourcesDOM
    .select('form#user .fname')
    .events('input')
    .compose(debounce(1000))
    .filter((e: {target: any}) => e.target.value.length > 2)
    .map((e: {target: any}) => e.target)

    const submit$ = sourcesDOM
    .select('form#user')
    .events('submit')
    .map(e => {
      e.preventDefault()
      console.log('3: Inside intent', e)
      return {user: 'CLICKED'}
    })

  return xs.combine(fNameInput$, submit$)
}

function formModel (actions$) {
  const initState = {user: '', fNameInput: {}}
  return actions$
    .map(([fNameInput, user]) => {
      const fName = fNameInput.value
      if (user.user === 'CLICKED') {
         fNameInput.value = fNameInput.defaultValue
         user.user = 'DISPLAY'
         return {user: user.user, fNameInput: fName}
      } else return initState
    })
    .startWith(initState)
}

function formView (state$) {
  return state$
    .map(({user, fNameInput}) =>
      div([
        form('#user', [
          label('Name'),
          hr(),
          input('.fname', {attrs: {id: 'first-name', type: 'text', placeholder: 'First name'}}),
          hr(),
          input('.sub', {attrs: {type: 'submit', value: 'Save'}})
        ]),
        (user === 'DISPLAY') && div([
          h2('Submitted value'),
          p(fNameInput),
          hr()
        ])
      ])
    )
}

function main (sources) {
  const actions$ = formIntent(sources.DOM)
  const state$ = formModel(actions$)
  const vtree$ = formView(state$)

  return {
    DOM: vtree$
  }
}

【讨论】：

【解决方案2】：

当 DOM 刷新时，您可以使用钩子来更新输入值。因此，如果您使用使用 Snabbdom 的 @cycle/dom 版本 >11.0，您可以这样使用：

input({
    hook: {
        update: (o, n) => n.elm.value = ''
    }
})

您可以在空字符串中传递您想要的默认值。每次状态更新时都会刷新输入值。

【讨论】：