代码之家  ›  专栏  ›  技术社区  ›  HalfWebDev

合并map rxjs中pulect和combineTest的值

  •  0
  • HalfWebDev  · 技术社区  · 6 年前

    我有一个道具 addHandler AddTodo 组件来自 App.js . 然后在里面 地址 combineLatest 合并在内部 map

    这是我的密码

    应用程序js

    import React from 'react';
    import { componentFromStream , createEventHandler } from "recompose";
    import { combineLatest } from "rxjs";
    import { map, tap } from "rxjs/operators";
    import AddTodo from './AddTodo/AddTodo';
    
    import Todos from './Todos/todos';
    // import User from './User/User';
    
    const App = componentFromStream(prop$ => {
        const { handler: onAddHandler, stream: clickStream } = createEventHandler();
        const value$ = clickStream.pipe( tap(input =>
            console.warn(input)
            ));
    
        return combineLatest(prop$, value$).pipe(map(([props, value]) => <div>
              <AddTodo onAddHandler={onAddHandler}  />
              {/* <input placeholder="Add TODO" onChange={handler} /> */}
              <Todos todo={value} />
            </div>));
    });
    
    
    export default App;
    

    import React from "react";
    import { combineLatest } from "rxjs";
    import { componentFromStream, createEventHandler } from "recompose";
    import { pluck, map, startWith, tap } from "rxjs/operators";
    
    const AddTodo = componentFromStream(prop$ => {
      const {
        handler: onChangeHandler,
        stream: inputStream
      } = createEventHandler();
      const value$ = inputStream.pipe(
        map(e => e.target.value),
        startWith("")
      );
    
      return combineLatest(prop$, value$).pipe(
        map(([props, value]) => (
          <div>
            <input
              type="text"
              placeholder="Add Todo..."
              onChange={onChangeHandler}
            />
            <button onClick={() => {}}>Add todo</button>
            {/* <button onClick={() => onAddHandler(value)}>Add todo</button> */}
          </div>
        ))
      );
    });
    
    export default AddTodo;
    

    内部 AddTodo.js 在地图里面我可能在找

      return combineLatest(prop$, value$).pipe(
        pluck('onAddHandler'),
        // and use this value plus the belo values inside map
        map(([props, value]) => (
    
    1 回复  |  直到 6 年前
        1
  •  0
  •   t7yang    6 年前

    你只要动一下 pluck 里面 combineLatest 看起来像这样,然后你

    return combineLatest(prop$.pipe(pluck('onAddHandler')), value$).pipe(
      map(([onAddHandler, value]) => (
        <div>
          <input
            type="text"
            placeholder="Add Todo..."
            onChange={onChangeHandler}
          />
          <button onClick={() => {}}>Add todo</button>
          {/* <button onClick={() => onAddHandler(value)}>Add todo</button> */}
        </div>
      ))
    );