1

以下に示すような、cycle.js とリアクティブ xstream ライブラリを使用したコードがあります。これは、送信時に値が ap タグでレンダリングされるフォーム フィールドで構成されます。質問は次のとおりです。 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()
        ])
      ])
    )
}

このようなフォームを作成するより良い方法はありますか? PS formIntent 関数の出力は、formView 関数の入力に供給されます。

4

2 に答える 2