2017-05-31 3 views
0

Ramda関数内の値が "state"になっているものを使いたいと思います。これは "AND"フィルタと同様に動作します。したがって、1つの値、または複数の値を受け取ることがあります。Ramadを使ってReactを使って配列を渡す

コンポーネントからのデータをこのramda関数に渡すにはどうすればよいですか?

stateで設定されている値を追加するために、 'ramda'をどのようにループすることができますか?

は私もcodepenにこれを追加しました:https://codesandbox.io/s/3OGK2pP9

const AndFilter = pipe(
    prop('movies'), 
    filter(
    both(
    // Example data to show how it should arrive from the react component. 
     where({ genres: pipe(pluck('name'), contains('foo')) }), 
     where({ genres: pipe(pluck('name'), contains('bar')) }), 
     where({ genres: pipe(pluck('name'), contains('baz')) }), 
    ), 
), 
); 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: dataTest, 
     selectedFilters: { foo, bar, baz }, 
    }; 
    } 
    AndFilter =() => { 
    this.setState({ movies: AndFilter(x) }); 
    }; 
    render() { 
    return (
     <div> 
     <button onClick={this.AndFilter}>test</button> 
     {this.state.movies.map(movies => (
      <li key={movies.id}> {movies.name} </li> 
     ))} 
     </div> 
    ); 
    } 
} 

答えて

0

これはおそらく愚かな答えが、ちょうどそうのように、コンポーネント小道具にあなたの関数の参照を渡していない理由:

constructor(props) { 
    super(props); 
    this.AndFilter=this.AndFilter.bind(this); 
    this.state = { 
     movies: [{"name":"foo"}, {"name":"bar"},{"name":"baz"}], 
     selectedFilters: {}, 
    }; 
    } 

AndFilter(){ 
    this.setState({movies:this.props.AndFilter(this.state)}); 
} 
____________________ 
let props={ 
    AndFilter:AndFilter, 
    .... 
} 

<MyComponent {...props}> 

編集:

申し訳ありません私はあなたの機能を見ていませんでした意味:

const AndFilter = pipe(
    prop('movies'), 
    filter(
    allPass(
     [propEq('name','foo')] 
    ) 
), 
); 

またはこのような(比較関数のどこコンパレータアレー):あなたは、あなたのコンポーネントにコンパレータを生成することができます

const AndFilter = curry( 
    (comparators) => 
     pipe(
      prop('movies'), 
      filter(
       allPass(
       comparators 
       ) 
      ), 
     ) 
);  

あなたがクリックしたときに、私はまた、ここにhttps://codesandbox.io/s/pO8yWXM2を見て、セットアップリスナーに忘れますdivでは、述語を渡す人以外のすべての人をフィルタリングします。

+0

もっと包括的な例を教えてください。おそらく私のペンに?私は成功することなくそれを実装しようとしました。 https://codesandbox.io/s/3OGK2pP9 – Ycon

+0

ok one moment .... –

+0

私はまだフォローしていません。あなたの例は構造の異なるデータのためのものであり、 'ramda'フィルタの方法も異なっています。あなたはここでそれをしてくださいできますかhttps://codesandbox.io/s/J6WW5BD9l?私は変数が 'AndFilter' constに渡されているのを見ません。 – Ycon

関連する問題