React.js'deki alt bileşenleri tıklatın olayları nasıl işlemek, bir "yol" tepkisi var mı?

Question

Arama filtresi ve anahtar/değer/ebeveyn-çocuk ilişkisi olan 2 panelden oluşan bir pencere öğesi oluşturmaya/prototiplemeye çalışıyorum. Sağ panelde kategoriler vardır, sol panelde bireysel bir kategoriyle ilişkilendirilmiş ilgi alanları vardır. İlgili satır onay kutularını göstermek için kategori satırları seçilebilir. Form gönderimlerini onay kutularıyla nasıl güncelleyeceğimi anlamaya çalışmadım, önce veri akışını yapmak için doğru yol hakkında daha fazla bilgi edinmem gerekiyor.

Bu Tepki içine benim ilk baskını ve ben tek yönlü veri akışını teşvik tepki biliyoruz. Olayları işlemek için jQuery'yi kullanarak ilgi alanı panelini yanlış şekilde güncelleştirdiğimi hissediyorum. İlgi alanı panelini güncellemek için bazı alternatif yollar öğrenmek istiyorum.

ne okudum, veli güncellemek için (sanırım onun Tepki docs sahibi olarak anılacaktır) itibaren çocuk/ownee bileşenlerine geri aramalar tanımlamanız gerekir bileşenler. Bunun bir açıklaması için minnettarım ve aynı zamanda eyaletteki sahnelere ve sahnelere yanlış bir şekilde menfaat kullanıyorum. Arama filtresinin yalnızca & Arama filtresine sahip olmaya çalıştığım, onay kutularının pencere öğesi için durumun bir parçası olması gerektiğinden, bu filtrelenmiş verilerin sahne alanına ait olması gerektiğini okudum.

GÜNCELLEME: Ben şimdi ben sahne olarak kullanıyorum, getDefaultProps içinde başlatılması için ilgi değiştirdi. Bence bu daha çok tepki yoludur, düzeliyorum mu? Ayrıca, handleCategoryRowClick işlevini değiştirerek ilgi alanlarının güncellenme biçimini değiştirdim. Sanırım şimdi daha fazla React yolu yapıyorum ama React kullanarak daha fazla deneyime sahip olan herkesin verebileceği herhangi bir tavsiyeyi yine de sevebilirim, teşekkür ederim.

Herhangi bir yardım büyük takdir! mümkün olduğunca sık

componentDidMount: function() { 
     $(document).on("handleCategoryRowClick", this.handleCategoryRowClick); 
    }, 

• Treat props olarak değişmez ve hayat beklendiği gibi çalışacak döngüsü yöntemleri tepki:

  /** @jsx React.DOM */ 
  
  var InterestRow = React.createClass({ 
      render: function() { 
       return (
        <div> 
         <label>{this.props.interest.name}</label> 
         <input type="checkbox" ref={this.props.key} value={this.props.key} /> 
        </div> 
       ) 
      } 
  }); 
  
  var InterestPanel = React.createClass({ 
      var interestPanel = this; 
      var rows = []; 
  
      render: function() { 
       var rows = []; 
       var i = 0; 
  
       _(this.props.interests).each(function (interest) { 
        rows.push(<InterestRow interest={interest} key={interest.value} />); 
       }); 
  
       return (
        <form>{rows}</form> 
       ) 
      } 
  }); 
  
  var CategoryRow = React.createClass({ 
      render: function() { 
       return (
        <li onClick={this.props.handleClick.bind(null, this.props.interests)}>{this.props.category}</li> 
       ) 
      } 
  }); 
  
  var CategoriesPanel = React.createClass({ 
  render: function() { 
      var categoriesPanel = this; 
      var rows = []; 
      var categories = []; 
      var interests = []; 
      var interestSet = []; 
      var missedSet = []; 
      var lastCategory = null; 
      var category; 
      var interest; 
      var i = 0; 
  
      _.each(categoriesPanel.props.data, function (datum) { 
       name = datum.name; 
       value = datum.targeting_value; 
       category = name.split('/')[0]; 
       interest = {name: name.split('/')[1], value: value} 
  
       if (_.contains(interest.name.toLowerCase(), categoriesPanel.props.searchText.toLowerCase())) { 
        if (category !== lastCategory) { 
         if (interestSet.length > 0) { 
          interests.push(interestSet.concat(missedSet)); 
         } 
  
         lastCategory = category; 
         categories.push(category); 
         interestSet = []; 
         interestSet.push(interest); 
         missedSet = []; 
        } else { 
         if (!_.contains(categories, category)) { 
          categories.push(category); 
          interestSet.push(interest); 
         } else { 
          interestSet.push(interest); 
         } 
        } 
       } else { 
        if (category !== lastCategory) { 
         if (interestSet.length > 0) { 
          interests.push(interestSet.concat(missedSet)); 
         } 
  
         lastCategory = category; 
         interestSet = []; 
         missedSet = []; 
         missedSet.push(interest); 
        } else { 
         missedSet.push(interest); 
        } 
       } 
      }); 
  
      if (interestSet.length > 0) { 
       interests.push(interestSet.concat(missedSet)); 
      } 
  
      var interestsObject = _.zipObject(categories, interests); 
  
      _.each(interestsObject, function (interestSet, category) { 
       i++; 
       rows.push(<CategoryRow category={category} key={i} interests={interestSet} handleClick={categoriesPanel.props.handleClick} />) 
      }); 
  
      return (
       <div> 
        <ul>{rows}</ul> 
       </div> 
      ) 
  } 
  }); 
  
  var SearchBar = React.createClass({ 
      handleChange: function() { 
       this.props.onUserInput(
        this.refs.searchTextInput.getDOMNode().value 
       ) 
      }, 
      render: function() { 
       return (
        <form onSubmit={this.handleSubmit}> 
         <input 
          type="text" 
          placeholder="Search Interests..." 
          value={this.props.searchText} 
          ref="searchTextInput" 
          onChange={this.handleChange} 
         /> 
        </form> 
       ); 
      } 
  }); 
  
  var InterestsTable = React.createClass({ 
  loadDataFromTwitter: function() { 
      $.ajax({ 
       url: this.props.url, 
       dataType: 'json', 
       success: function(data) { 
        this.setProps({data: data}); 
       }.bind(this) 
      }); 
  }, 
  getInitialState: function() { 
      return { 
       searchText: '' 
      } 
  }, 
  getDefaultProps: function() { 
      return { 
       data: [], 
       interests: [] 
      } 
  }, 
  componentWillMount: function() { 
      this.loadDataFromTwitter(); 
  }, 
  handleUserInput: function(searchText) { 
      this.setState({ 
       searchText: searchText 
      }); 
  }, 
  handleCategoryRowClick: function(interests) { 
      this.setProps({ 
       interests: interests 
      }); 
  }, 
  render: function() { 
      return (
       <div> 
        <SearchBar 
         searchText={this.state.searchText} 
         onUserInput={this.handleUserInput} 
        /> 
        <CategoriesPanel 
         data={this.props.data} 
         searchText={this.state.searchText} 
         handleClick={this.handleCategoryRowClick} 
        /> 
        <InterestsPanel 
         interests={this.props.interests} 
         searchText={this.state.searchText} 
        /> 
       </div> 
      ); 
  } 
  }); 
  
  React.renderComponent(
      <InterestsTable url="/api/interests" />, 
      document.getElementById('content') 
  ); 
  

Answer 1

• Orada kaldırılabilir bazı kalıcı jQuery olduğunu. InterestsTable bileşen sahibi ve onu değiştirir çünkü bu durumda, interests state yerine props olmalıdır;

getInitialState: function() { 
     return { 
     interests: [], 
     searchText: "" 
     }; 
    }, 
    handleCategoryRowClick: function(e, interests) { 
     this.setState({ 
     interests: interests 
     }); 
    },