在CycleJS中使用输入字段值作为HTTP请求数据的一部分

import {run} from '@cycle/run';
import {div, input, button, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import {combineLatest} from 'rxjs';

function main(sources) {
  const inputValue$ = sources.DOM.select('.input-field')
    .events('input')
    .map(event => event.target.value);

  const request$ = combineLatest(inputValue$, sources.HTTP)
    .map(([inputValue]) => ({
      url: 'https://api.example.com/data',
      method: 'POST',
      send: {inputValue}
    }));

  const vdom$ = request$.map(request => 
    div([
      input('.input-field', {type: 'text'}),
      button('.submit-button', 'Submit'),
      request && request.send && request.send.inputValue
        ? div(`Sending value: ${request.send.inputValue}`)
        : null
    ])
  );

  const http$ = sources.DOM.select('.submit-button')
    .events('click')
    .mapTo(request$);

  return {
    DOM: vdom$,
    HTTP: http$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);