cycle.js의 양식 필드를 기본값으로 재설정하는 방법

Question

아래에 표시된 것과 같이 cycle.js와 반응성 xstream 라이브러리를 사용하는 코드가 있습니다. 제출시 p 태그에 값이 렌더링되는 양식 필드로 구성됩니다. 질문은 다음과 같습니다. 1. 양식을 제출할 때 양식의 입력 필드를 어떻게 기본값으로 재설정 할 수 있습니까? 2. 입력 $을 재설정하고 제출 후 $ 스트림을 초기 값으로 제출하는 방법이 있습니까?

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() 
     ]) 
     ]) 
    ) 
} 

이와 같은 양식을 만드는 더 좋은 방법이 있습니까? 오후 8시 30 분 P.S. formIntent 함수의 출력은 formView 함수의 입력으로 공급됩니다.

Answer 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$ 
    } 
} 

Answer 2

DOM을 새로 고칠 때 입력 값을 업데이트하기 위해 후크를 사용할 수 있습니다. 그래서 당신은 Snabbdom 당신이로 사용할 수있는 사용주기/DOM 버전> 11.0 @ 사용하는 경우 : 당신이 원하는 기본 값을 전달할 수 빈 문자열

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

. 상태가 업데이트 될 때마다 입력 값을 새로 고칩니다.