複数のチェックボックスフィルタに反応する

Question

昨日の楽しみのためにリアクションを開始しました。私は簡単なイベントリストWebアプリケーションを作成しようとしています。私は公式の文書がかなり良いと分かり、例を追ってきました。

「私は自分の必要性のためにチュートリアルをしましたが、私の頭を包み込むことはできません。

私は、データのテーブルを更新し、複数のチェックボックスフィルタを持っていると思いますが、私は必要な小道具を管理しながら、これらの個々の入力の状​​態を制御する方法を把握することはできません。私は親isChecked小道具から彼らの状態を取っているので、なぜ1つだけが選択されたときにすべてのチェックボックスがチェックされるのか理解していると思いますか？ここで

var EventFilter = React.createClass({ 

    handleChange: function() { 

    if (this.refs.isCheckedInput.checked) { 

     this.props.onUserInput(
     this.refs.isCheckedInput.value, 
     this.refs.isCheckedInput.checked 
    ); 

    } else { 
     this.props.onUserInput('', false); 
    } 

    }, 

    render: function() { 

    return (
     <label> 
     <input 
      type="checkbox" 
      value={this.props.value} 
      checked={this.props.isChecked} 
      ref="isCheckedInput" 
      onChange={this.handleChange} 
     /> 
     {this.props.value} 
     </label> 
    ); 

    } 

}); 


var App = React.createClass({ 

    getInitialState: function() { 

    return { 
     selectedFilter: '', 
     isChecked: false 
    }; 

    }, 

    handleUserInput: function(selectedFilter, isChecked) { 

    this.setState({ 
     selectedFilter: selectedFilter, 
     isChecked: isChecked 
    }); 

    }, 

    render: function() { 

    return (

     <div className="app"> 

     <div> 
      <EventFilter 
      value="Bridgewater Hall" 
      selectedFilter={this.state.selectedFilter} 
      isChecked={this.state.isChecked} 
      onUserInput={this.handleUserInput} 
      /> 
      <EventFilter 
      value="The Deaf Institute" 
      selectedFilter={this.state.selectedFilter} 
      isChecked={this.state.isChecked} 
      onUserInput={this.handleUserInput} 
      /> 
     </div> 

     <EventTable 
      selectedFilter={this.state.selectedFilter} 
      listings={this.props.source} 
     /> 

     </div> 

    ); 

    } 

}); 

は私のJSFiddleへのリンクです - http://jsfiddle.net/zhpk99ky/

私はチェックボックスを選択して、データをフィルタリングしますが、彼らは私のローカル設定にしないだろういくつかの理由で、提供された例についての注意 - 問題は、データがフィルタリングされても、選択された値だけが渡されても両方のチェックボックスが選択されていることです。

私はReactDOM.renderからReact.renderに変更しなければなりませんでした。なぜなら、その理由もわかりません。

私は、私はそれは難しい適切リアクト考え方で考えることを見つけることだと任意の良い記事やリソースは素晴らしいことだので、楽しみのために学ぶことをしようとしている言ったように何かアドバイスは、いただければ幸いです。ありがとう。

編集：gravityplanxは私が十分に1を明確にしていないと思いますので、私は疑問を提起していない言及しました！

は、どのように私はまだデータをフィルタリングする必要がある個々の入力値の上を通過しながら、複数のチェックボックスの状態を扱うことができますか？アプリのコンポーネントから

Answer 1

ディッチisSelected。それは本当にあなたにとって何か役に立つことではありません。代わりに

、あなたの子コンポーネントは次のようになり持っています。

<EventFilter 
      value="Bridgewater Hall" 
      selectedFilter={this.state.selectedFilter} 
      isChecked={this.state.selectedFilter === "Bridgewater Hall"} 
      onUserInput={this.handleUserInput} 
      /> 

あなたが変更ハンドラでそれに/ポップ文字列を、複数のフィルタを適用する配列としてselectedFiltersからselectedFilterを変更し、プッシュしたい、と.includesまたは.indexOfするフィルタの小道具にisCheckedを変更した場合

。