我有一个addHandler
的道具从AddTodo
传递到App.js
组件。然后,在AddTodo
处理程序中,我不确定如何将pluck和map结合起来,以便我能从pluck以及combineLatest
内合并的map
中获得价值
这是我的代码
App.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;
AddTodo.js
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]) => (
答案 0 :(得分:0)
您需要做的就是将pluck
移到combineLatest
内,如下所示,然后
应该在地图操作符中获取onAddHandler:
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>
))
);