props çocuk react.js alt üst olayları kullanarak geçmek için basit bir yolu yok mu?

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

Kontrollü bileşenleri bir giriş değeri geçirmek için kullanabilirsiniz ama bütün kit' n kaboodle. geçirmek için iyi olacağını biliyorum Bazen alt bileşeni yerine bakmak lazım olmayan bilgileri içerir.

Belki de olay bileşeni bağlamak için bir yolu var mı?

GÜNCELLEME – 9/1/2015

Bir yıldan fazla Tepki kullanarak, ve Sebastien Lorber cevabı teşvikiyle sonra, anne-babalar olarak işlev için bağımsız değişken olarak alt bileşenleri geçiyor olduğuna karar verdimdeğilaslında bu Tepki, ne de hiç iyi bir fikir. Cevabı açık ettik.

Güncelleme (9/1/15): OP bu soruyu hareketli bir hedefi biraz yaptı. Tekrar güncellenmiş oldu. Yani, benim cevap güncelleme için sorumlu hissediyorum.

İlk olarak, sizin için bir cevap örneği verilmiştir

Evet, bu mümkün.

Çocuk onClick this.props.onClick.bind(null, this) olmak güncelleyerek bu sorunu çözebilirsiniz:

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick.bind(null, this)}>Click me</a>;
  }
});

Olay işleyici Üst bileşen erişim ve bu gibi olay

  onClick: function (component, event) {
    // console.log(component, event);
  },

JSBin snapshot

< / ^ br .

Ama çeldirici bir soru

Üst zaten Çocuk props bilir.

Bu sahne aslında sağlanıyor çünkü verilen örnekte olduğu belli değil. Bu örnek kod, daha iyi bir soru soruluyor destek olabilir:

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick}> {this.props.text} </a>;
  }
});

var Parent = React.createClass({
  getInitialState: function () {
    return { text: “Click here” };
  },
  onClick: function (event) {
    // event.component.props ?why is this not available? 
  },
  render: function() {
    return <Child onClick={this.onClick} text={this.state.text} />;
  }
});

Senin Çocuğun sahne ne olduğunu zaten biliyor bu örnekte çok açık bir hale geliyor.

JSBin snapshot

< / ^ br .

Bir Çocuğun sahne kullanarak gerçekten ilgiliyse...

Eğer bir Çocuğun sahne kullanma konusunda gerçekten varsa, Çocuk ile herhangi bir şekilde bağlantısı tamamen kurtulabilirsiniz.

JSX ben sık sık Çocuk gibi bileşenleri kullanmak spread attributes bir API vardır. props tüm alır ve bir bileşeni için de geçerlidir. Çocuk bu gibi görünecektir:

var Child = React.createClass({
  render: function () {
    return <a {…this.props}> {this.props.text} </a>;
  }
});

Siz değerleri doğrudan Üst kullanmasına izin:

var Parent = React.createClass({
  getInitialState: function () {
    return { text: “Click here” };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />;
  }
});

JSBin snapshot

< / ^ br . Ve işte’ ek yapılandırma ek Alt bileşenleri kargaburun gerektiği gibi

var Parent = React.createClass({
  getInitialState: function () {
    return {
      text: “Click here”,
      text2: “No, Click here”,
    };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <div>
      <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />
      <Child onClick={this.onClick.bind(null, this.state.text2)} text={this.state.text2} />
    </div>;
  }
});

JSBin snapshot

Ama o fiili kullanma durumu olmadığından şüpheleniyorum. Alayım mı daha çok...

< / ^ br .

Sağlam, pratik bir örnek

Verilen örnek genel yapısı hakkında konuşmak zor. Yukarıdaki soru için pratik bir kullanımı, bir çok uygulanan gösteriler bir bileşen oluşturdumReactyyol:

DTServiceCalculator working example
DTServiceCalculator repo

Bu bileşen, hizmet basit bir hesap makinesi. Hizmetler listesi ile sağlamak (adları ve fiyatları ile) ve toplam seçilen fiyatlar hesaplıyor.

Çocukların keyifli cahil

ServiceItem alt-bileşeni bu örnekte. Dış dünya hakkında birçok görüş yok. Tıklandığında çağrılacak fonksiyonu requires a few props,.

<div onClick={this.props.handleClick.bind(this.props.index)} />

Amaindexsağlanan handleClicksağlanan geri[source]aramak için hiçbir şey yapmaz.

Ebeveynler Çocukları

DTServicesCalculator ana bileşeni, bu örneğidir. Aynı zamanda bir çocuk. Bakalım.

DTServiceCalculator alt-bileşeni (ServiceItems) bir listesini oluşturur ve sahne [source] ile sağlamaktadır. ServiceItem ana bileşeni, ama alt-bileşen bileşeni geçmesiyle bir listesi var. Bu doz verileri değil kendi. Tekrar ana bileşen source bileşen işleme delegeler

<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />

handleServiceItem endeks alt geçti, yakalar ve ana [source] sağlar

handleServiceClick (index) {
  this.props.onSelect(index);
}

Sahipleri her şeyi biliyor

Kavramı “Mülkiyet” önemli bir Tepki. Okuma hakkında daha fazla here tavsiye ederim.

Gösterdiğim örnekte, devletin sahibi olan bileşen gidene kadar bileşen ağaca bir olay işleme delege duruyorum.

Sonunda oraya vardığımızda, devlet seçim/böyle deselection [source] çalışıyoruz:

handleSelect (index) {
  let services = […this.state.services];
  services[index].chosen = (services[index].chosen) ? false : true;
  this.setState({ services: services });
}

< / ^ br .

Sonuç

En dıştaki bileşenleri mümkün olduğunca opak tutmaya çalış. Hakkında çok az tercihler var emin olmak için üst bileşenli bunları uygulamak için seçti. bir gayret

İşleme veri sahibi haberdar edin. Çoğu durumda, temsilci olay bileşene ağaç işleme kadar ihtiyacınız olacaksahibidevlet.

Kenara: Flux pattern uygulamalar için gerekli bağlantıları bu tür azaltmak için iyi bir yoldur.