反応成分のフィルター機能

Question

非常に限られたJavascriptとプログラムの知識（私が行く間にこのアプリを使用して）を使用して、Reactでアパートを借りてアパートを建てています。私はフィルタ機能を構築しようとする大きな障害を見つけました。ここで

はFilterContainer.jsコンテナコンポーネント

const FilterContainer = React.createClass({ 
render() { 
    return (
     <section id="filterContainer" className="container"> 
      <Filter 
       name={'Kvart'} 
       filterList={['Šubićevac', 'Meterize', 'Baldekin', 'Vidici', 'Rokići', 'Grad']} /> 
      <Filter 
       name={'Cijena'} 
       filterList={['< 600kn', '600kn - 700kn', '700kn - 800kn', '800kn - 900kn', '> 900kn']} /> 
      <Filter 
       name={'Broj osoba'} 
       filterList={['1', '2', '3', '4', '5', '6']} /> 
      <Filter 
       name={'Kvadratura'} 
       filterList={['< 40m', '40m - 50m', '50m - 60m', '60m - 70m', '70m - 80m', '> 80m']} /> 
     </section> 
    ) 
}}); 

これはFilter.jsコンポーネントのコードです

var Filter = React.createClass({ 
getDefaultProps() { 
    return { 
     filterList: [], 
     name: '' 
    }; 
}, 
render() { 
    var handleClick = function(i, props) { 
     console.log('You clicked: ' + props.filterList[i].listValue[i]); 
    } 
    return (
     <div className="filterCloud quarter-section"> 
      <h3>{this.props.name}</h3> 
      <ul> 
       {this.props.filterList.map(function(listValue, i, props) { 
        return <li onClick={handleClick.bind(this, i, props)} key={i}>{listValue}</li>; 
       }, this)} {/* this at the end to fix the scope issue from global to local */} 
      </ul> 
     </div> 
    ) 
}}); 

これはフィルターがウェブサイト上でどのように見えるかである気圧

エラーは「Filter.js ：13 Uncaught TypeError：未定義のプロパティ '0'を読み取ることができません。私がフィルタ項目の1つをクリックするたびに、フィルタ項目の名前を私がアパートメントをフィルタリングするために使用するデータとして保存できるようにしたい。

したがって、単純な問題は未定義のエラーです。より複雑な問題は、私のアプリでフィルタ機能を構築する方法がわからないという事実です。あなた方の誰かが正しい方向に私を向けることができれば、私は多くの助けになります。

Answer 1

map function in javascriptの3番目のパラメータは、マップされている完全な配列です。

この場合、であり、this.propsではありません。

ですから、ハンドラをクリックして、あなたはpropsを横断する必要はありません。

var handleClick = function(i, props) { 
    console.log('You clicked: ' + props[i].listValue[i]); 
} 

あなたには、いくつかの名前を変更しなかったかどうかを確認するために容易になるだろう：

render() { 
    var handleClick = function(i, filterList) { 
     console.log('You clicked: ' + filterList[i].listValue[i]); 
    } 
    return (
     <div className="filterCloud quarter-section"> 
      <h3>{this.props.name}</h3> 
      <ul> 
       {this.props.filterList.map(function(listValue, i, filterList) { 
        return <li onClick={handleClick.bind(this, i, filterList)} key={i}>{listValue}</li>; 
       }, this)} {/* this at the end to fix the scope issue from global to local */} 
      </ul> 
     </div> 
    ) 
}});