以下に示すような、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 関数の入力に供給されます。