React.jsの状態の混乱

Question

私はまだreact.jsの状態の概念を理解しようとしています。誰も下のjsfiddleで助けてもらえますか？選択したカテゴリに基づいてレコードをフィルタリングしようとしています。

var App = React.createClass({ 
    render: function() { 
     return (
     <div> 
      <Instructions /> 
      <h1>Requests</h1> 
     </div> 
     ); 
    } 
}); 

Answer 1

私は一種の親子関係を持たないコンポーネント間の変更を伝えることは、両方の親であるトップレベルのコンポーネントで管理する状態を必要とする、と反応見つけたものとは通信しようとしているコンポーネントあなたの例では、MySelectとDisplayRecordsを子として持つ最上位のコンポーネントはAppです。 MySelectのステータスをDisplayRecordsの行に反映させる場合は、Appの状態で管理する必要があります。

この例では、選択ボックスの選択をAppの状態に移動し、それに応じてさまざまなコンポーネントに小道具を渡しました。私はコメントで注目すべき変更を説明するために最善を尽くしましたが、変更に関する質問があれば、間違いなくコメントを残してください！

var DisplayRecords = React.createClass({ 
    render: function(){ 
    var _this = this; // avoid conflicting this keyword 
    return (
     <div> 
     <table><tbody> // include tbody to avoid errors (weird react thing) 
     {_this.props.records.map(function(record){ // loop through each record 
      // if all records is selected, or the record status matches the selection 
      if(_this.props.filter=="All Requests" || record.status == _this.props.filter){ 
       // return the record as a table row 
       return (
       <tr key={record.id} > 
       <td>{record.title}</td> 
       <td><a href="#">{record.status}</a></td> 
       <td>{record.updated_at}</td> 
       <td>{record.created_at}</td> 
       <td><a href="#">Delete</a></td> 
       </tr> 
      ) 
      } 
      })} 
     </tbody></table> 
    </div> 
    ) 
    } 
}); 

var MySelect = React.createClass({ 
    callParentFunction: function(e) { 
    // call parent's getFilter function with the selected option's text as argument 
    this.props.changeHandler(e.target.options[e.target.selectedIndex].text); 
    }, 
    render: function() { 
    // note removed specified value of select box 
    return (
     React.createElement("select", { onChange: this.callParentFunction}, 
     React.createElement("option", { value: 1 }, "All Requests"), 
     React.createElement("option", { value: 2 }, "Approved"), 
     React.createElement("option", { value: 3 }, "Denied"), 
     React.createElement("option", { value: 4 }, "Pending") 
    ) 
    ) 
    } 
}); 


var App = React.createClass({ 

    getInitialState: function(){ 
    // set initial selection 
    return { 
    selected: "All Requests" 
    } 
    }, 
    getFilter:function(newFilter){ 
    // set new selection on change of select box 
    this.setState({selected: newFilter}) 
    }, 
    render: function() { 
    // pass selected state to both MySelect and DisplayRecords 
    // pass getFilter to MySelect so it can be called onChange 
    return (
     <div> 
     <MySelect selection={this.state.selected} changeHandler={this.getFilter} /> 
     <h1>Requests</h1> 
      <DisplayRecords records={this.props.data} filter={this.state.selected} /> 
     </div> 
    ); 
    } 
}); 
React.render(<App data={requests}/>, document.getElementById('container'));