Olay işleyicisinin içindeki React örneğine (bu) erişilemiyor

ES6'da (BabelJS ile) basit bir bileşen yazıyveyaum ve işlevleri this.setState çalışmıyveya.

Tipik hatalar gibi bir şey içerir

undefined öğesinin 'setState' özelliği okunamıyveya

veya

this.setState bir işlev değil

Neden biliyor musun? İşte kod:

impveyat React from 'react'

class SomeClass extends React.Component {
  constructveya(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        

The input fveyam is here:

        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

expveyat default SomeClass
156
Durum içindeki değeri güncellediğiniz için refs'e ihtiyacınız yok. Sadece durum değerini gönder.
katma yazar Blair Anderson, kaynak
Geçerli kodunuzda, React.findDOMNode (React.refs.someref) .value) 'i this.state.inputContent olarak değiştirin ve ref = "someref' i silin ".
katma yazar FakeRainBrigand, kaynak
Buradaki sorun değil, ancak kaçınmanız gerekir ref .
katma yazar FakeRainBrigand, kaynak
İşleviniz ES5'te duruma erişmek veya işlev içindeki ilerlemelere erişmek için bağlanma gerektirir, ancak ok işlevini kullanırsanız, bağlamayı otomatik olarak otomatik olarak yapmanız gerekmez ve ayrıca kapsamla ilgili sorunlardan uzak durabilirsiniz.
katma yazar Hemadri Dasari, kaynak
@FakeRainBrigand burada refs olmadan nasıl çözerdiniz?
katma yazar user3696212, kaynak

15 cevap

this.changeContent needs to be bound to the component instance via this.changeContent.bind(this) before being passed as the onChange prop, otherwise the this variable in the body of the function will not refer to the component instance but to window. See Function::bind.

ES6 sınıfları yerine React.createClass kullanılırken, bir bileşende tanımlanan her yaşam döngüsü yöntemi otomatik olarak bileşen örneğine bağlanır. Autobinding bölümüne bakın.

Bir fonksiyonun bağlanmasının yeni bir fonksiyon yarattığını unutmayın. Doğrudan renderleme ile bağlayabilirsiniz; bu, bileşen her çalıştırıldığında yeni bir işlev oluşturulacağı veya yapıcınızda yalnızca bir kez ateş edecek şekilde bağlanacağı anlamına gelir.

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

vs

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

Referanslar, React.refs konumunda değil, bileşen örneğinde ayarlanır: React.refs.someref değerini this.refs.someref olarak değiştirmeniz gerekir. . Ayrıca sendContent yöntemini, bileşen örneğine bağlamanız gerekir; böylece bu buna işaret eder.

195
katma
Aynısı bind yerine bir ok işleviyle olabilir mi? Birçok durumda ok işlevleri daha önce bind ile yapılan işleri yapar, ancak bunun bir istisna olup olmadığını tam olarak bilmiyorum.
katma yazar hippietrail, kaynak
ES6'da, bir sınıfta tanımlanan yöntemler otomatik olarak örneğe bağlı değildir. Bu yüzden ihtiyaç duyduğunuzda onları manuel olarak bağlamanız gerekir. BabelJS ile özellik başlatıcı sözdizimini ve ok işlevlerini kullanarak doğrudan örneğe otomatik olarak bağlanacak yöntemleri tanımlayın. myMethod() {...} yerine myMethod =() => ... .
katma yazar Alexandre Kirszenberg, kaynak
@ marco İşte farklı bir örnek . object.method() ile bir yöntem çağırdığınızda, yöntem gövdesindeki this değişkeni object . Ancak, object.method öğesini başka bir işleve iletirseniz, yalnızca işlevin değeri geçilir ve nesnesini bağlamı kaybeder. Bu nedenle, React ile, bir olay işleyicisini, bir bileşene geçirmeden önce mevcut bileşen örneğinin içeriğini kaybetmemek için manuel olarak bağlamanız gerekir.
katma yazar Alexandre Kirszenberg, kaynak
Yapıcının kendisinde, birden çok kez oluşturulan işlevleri engellemek için ciltleme işlevinde hoş bir şey
katma yazar Abhinav Singi, kaynak
pardon ama anlamıyorum neden this.changeContent bileşen örneğine this.changeContent.bind (this) ile bağlanması gerekiyor? . Yani, bir alt sınıf veya React.Component aracılığıyla bir bileşen yazarız ve ES6'da bir sınıfta tanımlanan her yöntem otomatik olarak alt sınıf/sınıfın kendisi tarafından oluşturulan örneğe bağlanır. Neden burada "el ile" yapmamız gerekiyor? Tepki ile ilgili özel bir şey mi var? Yoksa ES6 sınıfı yöntemlerin dinamiği hakkında mı konuşuyorum?
katma yazar marco, kaynak
@AlexandreKirszenberg bu örneği inceleyin: yöntem otomatik olarak bağlı görünüyor örneğe göre ...
katma yazar marco, kaynak
Oluşturma işleminde doğrudan işlev/nesne bağlamalarını önermeyin. Bağlama, yalnızca ES6 kullanmıyorsanız yapıcıda yapılmalıdır
katma yazar Hemadri Dasari, kaynak
Harikasın, harika çalışıyor, teşekkürler!
katma yazar user3696212, kaynak

Morhaus haklı, ancak bu bind olmadan çözülebilir.

Bir ok işlevini sınıf özellikleri teklif :

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

Ok işlevi, yapıcı kapsamında bildirildiğinden ve ok işlevleri, bildirme kapsamlarından this değerini koruduğundan, hepsi çalışır. Buradaki dezavantajı bunların prototip üzerindeki işlev olmayacak olması, hepsi her bir bileşenle yeniden yaratılacak. Bununla birlikte, bind aynı şeyle sonuçlandığından bu pek dezavantajlı değildir.

82
katma
Bu yazı her şeye ışık tutuyor: reactkungfu.com/2015/07/…
katma yazar Erwin Mayer, kaynak
Bir yapıcı bu kodu kırmaz, başka bir sorununuz olması gerekir. Belki de doğru eklentiye sahip değilsindir? Bu, 2015 ön ayarının bir parçası değil, babel-plugin-transform-class-properties olarak adlandırılıyor. Bana kodunu gösterirsen, sorunun ne olduğunu söyleyebilirim. Babil Repl size güzel bir paylaşılabilir bağlantı verir.
katma yazar Tyrsius, kaynak
@BHouwens İşte babal REPL'de . Ne yaptığını bilmiyorum ama yanlış bir şey yapıyorsun.
katma yazar Tyrsius, kaynak
Bu da TypeScript'te mükemmel çalışır (genellikle TypeScript'te ciltleme konusunda endişelenmenize gerek yoktur, ancak bunun farklı olduğunu düşünüyorum)
katma yazar mjohnsonengr, kaynak
Bu işe yaramıyor. 'Özellik bildirimleri yalnızca bir .ts dosyasında kullanılabilir' alıyorum
katma yazar BHouwens, kaynak
Bir kurucu belirledim olabilir, ancak bunun dışında benim örneğim aynı ve derlemiyor. Ciltleme yöntemi olsa çalışır.
katma yazar BHouwens, kaynak

Bu sorun, React.createClass() bileşen tanımı sözdiziminden React.Component öğesini genişletmenin ES6 sınıf yoluna geçerken çoğumuzun karşılaştığı ilk şeylerden biridir.

It is caused by the this context differences in React.createClass() vs extends React.Component.

React.createClass() kullanımı, otomatik olarak bu içeriğini (değerlerini) doğru şekilde bağlar, ancak ES6 sınıfları kullanıldığında böyle olmaz. ES6 yolunu yaparken ( React.Component ) genişleterek bu bağlamı varsayılan olarak null olur. Sınıfın özellikleri otomatik olarak React class (component) örneğine bağlanmaz.


Bu Konuyu Çözme Yaklaşımları

Toplam 4 genel yaklaşım biliyorum.

  1. Bind your functions in the class constructor. Considered by many as a best-practice approach that avoids touching JSX at all and doesn't create a new function on each component re-render.

    class SomeClass extends React.Component {
      constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick() {
        console.log(this);//the React Component instance
      }
      render() {
        return (
          <button onClick={this.handleClick}></button>
        );
      }
    }
    
  2. Bind your functions inline. You can still find this approach used here and there in some tutorials/articles/etc, so it's important you're aware of it. It it the same concept like #1, but be aware that binding a function creates a new function per each re-render.

    class SomeClass extends React.Component {
      handleClick() {
        console.log(this);//the React Component instance
      }
      render() {
        return (
          <button onClick={this.handleClick.bind(this)}></button>
        );
      }
    }
    
  3. Use a fat arrow function. Until arrow functions, every new function defined its own this value. However, the arrow function does not create its own this context, so this has the original meaning from the React component instance. Therefore, we can:

    class SomeClass extends React.Component {
      handleClick() {
        console.log(this);//the React Component instance
      }
      render() {
        return (
          <button onClick={() => this.handleClick() }></button>
        );
      }
    }
    

    or

    class SomeClass extends React.Component {
      handleClick =() => {
        console.log(this);//the React Component instance
      }
      render() {
        return (
          <button onClick={this.handleClick}></button>
        );
      }
    }
    
  4. Use utility function library to automatically bind your functions. There are a few utility libraries out there, that automatically does the job for you. Here are some of the popular, just to mention a few:

    • Autobind Decorator is an NPM package which binds methods of a class to the correct instance of this, even when the methods are detached. The package uses @autobind before methods to bind this to the correct reference to the component's context.

      import autobind from 'autobind-decorator';
      
      class SomeClass extends React.Component {
        @autobind
        handleClick() {
          console.log(this);//the React Component instance
        }
        render() {
          return (
            <button onClick={this.handleClick}></button>
          );
        }
      }
      

      Autobind Decorator is smart enough to let us bind all methods inside a component class at once, just like approach #1.

    • Class Autobind is anDiğer NPM package that is widely used to solve this binding issue. Unlike Autobind Decorator, it does not use of the decorator pattern, but really just uses a function inside your constructor that automatically binds the Component's methods to the correct reference of this.

      import autobind from 'class-autobind';
      
      class SomeClass extends React.Component {
        constructor() {
          autobind(this);
         //or if you want to bind only only select functions:
         //autobind(this, 'handleClick');
        }
        handleClick() {
          console.log(this);//the React Component instance
        }
        render() {
          return (
            <button onClick={this.handleClick}></button>
          );
        }
      }
      

      PS: Diğer very similar library is React Autobind.


Tavsiye

Yerinde olsam, yaklaşım # 1'e sadık kalırdım. Bununla birlikte, sınıf kurucunuzda bir ton cilt elde ederseniz, 4. yaklaşımda belirtilen yardımcı kütüphanelerden birini araştırmanızı tavsiye ederim.


Diğer

Sorununuzla ilgili değil, ama siz referansları fazla kullanmamalı .

İlk eğiliminiz, uygulamanızda "bir şeyler yapmak" için refs kullanmak olabilir. Bu durumda, bir dakikanızı ayırın ve devletin bileşen hiyerarşisinde nereye sahip olması gerektiği konusunda daha eleştirel düşünün.

Benzer amaçlar için, ihtiyacınız olanınki gibi, kontrollü bileşen tercih edilen yoldur. Bileşen durum . Böylece, bu gibi bir değere kolayca erişebilirsiniz: this.state.inputContent .

41
katma
@Tyrsius, orada. Benim cevabımdaki # 3 yaklaşımına bakınız, şişman bir ok fonksiyonu + sınıf özellikleri önerisi.
katma yazar Kaloyan Kosev, kaynak
Bu, diğer cevabındaki yöntemden yoksun stackoverflow.com/a/34050078/788260
katma yazar Tyrsius, kaynak
@KaloyanKosev ne tıklama eylemi ve sadece basit yöntem çağrısı değilse?
katma yazar Rushi trivedi, kaynak
Bu kabul edilen cevaptan çok daha eksiksiz ve kullanışlıdır.
katma yazar drjimmie1976, kaynak

Olay işlevini yapıcıdaki bileşenle aşağıdaki gibi bağlamamız gerekir,

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        

The input form is here:

        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

Teşekkürler

1
katma

Her ne kadar önceki cevaplar çözümlerin (yani bağlayıcılık, ok işlevleri, bunu sizin için yapan dekoratörler) temel bir bakış açısını sunsa da, aslında bunun neden gerekli olduğunu açıklayan bir cevaba rastlamadım. bence kafa karışıklığının kaynağı ve gereksiz yere yeniden bağlama ve başkalarının yaptıklarını kör bir şekilde takip etme gibi gereksiz adımlara yol açıyor.

this is dynamic

Bu özel durumu anlamak için bu 'un nasıl çalıştığına dair kısa bir giriş yapın. Buradaki en önemli şey, this öğesinin bir çalışma zamanı bağlayıcı olması ve mevcut yürütme bağlamına bağlı olmasıdır. Bu nedenle, genellikle şu anki yürütme bağlamı hakkında bilgi veren ve neden bağlanmanız gerektiğine ilişkin olarak “bağlam” olarak adlandırılan neden “bağlam” olarak adlandırılmaktadır. Fakat sorunu bir snippet ile göstereyim:

const foobar = {
  bar: function() {
    return this.foo;
  },
  foo: 3,
};
console.log(foobar.bar());//3, all is good!

Bu örnekte, beklendiği gibi 3 değerini alıyoruz. Ancak bu örneği ele alalım:

const barFunc = foobar.bar;
console.log(barFunc());//Uh oh, undefined!

Tanımsız olarak günlüğe kaydettiğini bulmak beklenmedik olabilir - 3 nereye gitti? Bu sorunun cevabı "bağlam" ya da nasıl bir işlevi yürüttüğünüzde yatıyor. İşlevleri nasıl adlandırdığımızı karşılaştırın:

// Example 1
foobar.bar();
// Example 2
const barFunc = foobar.bar;
barFunc();

Farkı fark et. İlk örnekte, bar yönteminin 1 konumunun tam olarak nerede olduğunu - foobar nesnesinin üzerinde bulunduğunu belirtiyoruz:

foobar.bar();
^^^^^^

Ancak ikincisinde, yöntemi yeni bir değişkende saklarız ve bu değişkeni, yöntemin gerçekte nerede bulunduğunu açıkça belirtmeden, dolayısıyla bağlamı kaybetmeden belirtmek için kullanırız:

barFunc();//Which object is this function coming from?

Ve burada bir problemi var, bir metodu bir değişkende sakladığınızda, o metodun bulunduğu yer hakkındaki orijinal bilgiler (metodun uygulandığı bağlam) kaybolur. Bu bilgiler olmadan, çalışma zamanında, JavaScript yorumlayıcısının doğru this ’i bağlamasına imkan yoktur - belirli bir içerik olmadan, this beklendiği gibi çalışmaz 2 .

Tepki ile ilgili

İşte bu sorunundan muzdarip bir React bileşenine (kısalık kısaltılmış) bir örnek:

handleClick() {
  this.setState(({ clicks }) => ({//setState is async, use callback to access previous state
    clicks: clicks + 1,//increase by 1
  }));
}

render() {
  return (
    <button onClick={this.handleClick}>{this.state.clicks}</button>
  );
}

Fakat neden, ve önceki bölüm bununla nasıl ilişkili? Bunun nedeni aynı sorunun soyutlanmasından muzdarip olmalarıdır. Nasıl bir göz atarsanız,

Bu nedenle, onClick = {this.handleClick} yaptığınızda, this.handleClick yöntemi nihayetinde listener 3 değişkenine atanır. . Ancak şimdi sorunun ortaya çıktığını görüyorsunuz - this.handleClick 'i dinleyicisine atadığımız için, artık tam olarak handleClick ' in nereden geleceğini belirtmiyoruz ! React'in bakış açısından dinleyici , herhangi bir nesneye (veya bu durumda, React bileşen örneğini) bağlı olmayan yalnızca bir işlevdir. Bağlamımızı kaybettik ve bu nedenle tercüman inside handleClick 'i kullanmak için bir bu değerini çıkartamaz.

Ciltleme neden işe yarıyor?

Tercüman çalışma zamanında bu değerine karar verirse, işleyiciyi neden işe yarayacağını bağlayabilirim? Bunun nedeni, çalışma zamanında İşlev # bağla işlevini garanti etmek this değerini kullanabilmenizdir. Bu, bir işlev üzerinde bir this bağlayıcı özelliği ayarlayarak, this çıkarımına izin vermeden yapılır:

this.handleClick = this.handleClick.bind(this);

Bu satır çalıştırıldığında, muhtemelen kurucuda geçerli this yakalanır (React bileşeni örneği) ve dahili this bağlaması olarak ayarlanır Tamamen yeni bir işlevin işlevi, İşlev # bağla öğesinden döndürüldü. Bu, this çalışma zamanında hesaplandığında, tercümanın hiçbir şey çıkarmaya çalışmadığını, ancak verilen this değerini kullandığınızdan emin olmasını sağlar.

Ok işlevi özellikleri neden işe yarıyor?

Ok işlevi sınıfı özellikleri şu anda aktarıma bağlı olarak Babil'de çalışmaktadır:

handleClick =() => { /* Can use this just fine here */ }

Oluyor:

constructor() {
  super();
  this.handleClick =() => {}
}

And this works due to the fact arrow functions do not bind their own this, but take the this of their enclosing scope. In this case, the constructor's this, which points to the React component instance—thus giving you the correct this.4


1 I use "method" to refer to a function that is supposed to be bound to an object, and "function" for those not.

2 In the second snippet, undefined is logged instead of 3 because this defaults to the global execution context (window when not in strict mode, or else undefined) when it cannot be determined via specific context. And in the example window.foo does not exist thus yielding undefined.

3 If you go down the rabbit hole of how events in the event queue are executed,

invokeGuardedCallback is called on the listener.

4 It's actually a lot more complicated. React internally tries to use Function#apply on listeners for its own use, but this does not work arrow functions as they simply do not bind this. That means, when this inside the arrow function is actually evaluated, the this is resolved up each lexical environment of each execution context of the current code of the module. The execution context which finally resolves to have a this binding is the constructor, which has a this pointing to the current React component instance, allowing it to work.

0
katma

Bağlayıcıyı yapıcı sözdiziminde tutmak istemeniz durumunda, proposal-bind -operator" rel="nofollow noreferrer"> proposal-bind-operator ve kodunuzu aşağıdaki gibi dönüştürün:

constructor() {
  this.changeContent = ::this.changeContent;
}

Yerine :

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

çok daha basit, bind (this) veya fatArrow 'a gerek yok.

0
katma

Olay işleyicilerinde durum ya da sahne ile oynamak için işlevlerinizin bağlanması gerekiyor

ES5'te, olay işleyicinizi yalnızca yapıcıda işlev görür, ancak doğrudan renderleme ile bağlamaz. Doğrudan renderleme ile ciltleme yaparsanız, bileşeniniz her işlediğinde ve yeniden işlediğinde, yeni bir işlev oluşturur. Yani onu her zaman yapıcıya bağlamalısınız.

this.sendContent = this.sendContent.bind(this)

ES6'da ok işlevlerini kullanın

Ok işlevlerini kullandığınızda, ciltleme yapmanıza gerek kalmaz ve ayrıca kapsamla ilgili sorunlardan da uzak durabilirsiniz.

sendContent = (event) => {

}
0
katma

Merhaba, işlev çağrınızı kendiniz bağlamayı umursamıyorsanız. 'Class-autobind' kullanabilir ve bu şekilde alabilirsiniz

import autobind from 'class-autobind';

class test extends Component {
  constructor(props){
  super(props);
  autobind(this);
}

Süper aramadan önce autobind yazmayın çünkü çalışmaz

0
katma

Ok fonksiyonlarını kullanmanın daha umut verici olduğunu gördüm. Size tutarlılık verecek ve kolayca birden fazla parametre iletebilirsiniz.

<button onClick={(event)=> this.sendContent(event, "param1", "param2")}>Submit</button>

İstediğiniz gibi daha fazla parametre iletin. Bağlanmaktan daha net.

0
katma

Bu sorun, this.changeContent ve onClick = {this.sendContent} bileşeninin örneğinin this 'ine bağlı olmadığı için oluyor.

Çevreleyen kodun aynı sözcüksel kapsamını paylaşan ve bunu koruyan ES6'nın ok işlevlerini kullanmak için yapıcıda() bind() işlevine ek olarak başka bir çözüm var render() içindeki kodunuz:

render() {
    return (

        <input type="text"
          onChange={() => this.changeContent() } /> 

        <button onClick={() => this.sendContent() }>Submit</button>

    )
  }
0
katma
Bu aynı zamanda kötü bir uygulama olarak kabul edilir, çünkü bileşen her çalıştırıldığında yeni bir işlev yaratıyorsunuzdur. ES6 sınıflarınızdaki işlevlerinizi, otomatik olarak sınıfın kendisine bağlamak için const changeContent =() => {...} ile tanımlayabilirsiniz.
katma yazar elQueFaltaba, kaynak

Bunu üç yoldan halledebilirsiniz.

1. Kurucudaki olay işlevini aşağıdaki gibi bağlayın

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        

The input form is here:

        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

2.Bağlandığında bağla

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        

The input form is here:

        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent.bind(this)}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

3. Ok işlevlerini kullanarak

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        

The input form is here:

        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={()=>this.sendContent()}>Submit</button>
      </div>
    )
  }
}

export default SomeClass
0
katma

Tavsiyem ok özelliklerini bir özellik olarak kullanmak.

class SomeClass extends React.Component {
  handleClick =() => {
    console.log(this);//the React Component instance
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

ok işlevlerini kullanmayın.

class SomeClass extends React.Component {
      handleClick(){
        console.log(this);//the React Component instance
      }
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

Çünkü ikinci yaklaşım her render çağrısı için yeni fonksiyon üretecektir, bu aslında daha yeni performans göstericisine göre daha fazla React.PureComponent veya React. Bileşen , shouldComponentUpdate (nextProps, nextState) ürününü geçersiz kılabilir ve sahne geldiğinde sığ denetimi yapabilirsiniz

0
katma

bu sorun, olay olay işleyicisinin bileşene otomatik olarak bağlanmadığı tepki 15'ten sonra gerçekleşir. bu nedenle, olay işleyicisi ne zaman çağrılacağını manuel olarak bileşene bağlamanız gerekir.


sorunu çözmek için çeşitli yöntemler vardır. fakat hangi yöntemin en iyi olduğunu ve neden olduğunu bilmeniz gerekir. Genel olarak, işlevlerinizi sınıf yapıcısında bağlamanızı veya bir ok işlevi kullanmanızı öneririz.

// method 1: use a arrow function
    class ComponentA extends React.Component {
      eventHandler =() => {
        console.log(this)
      }
      render() {
        return ( 
         
        );
      }

// method 2: Bind your functions in the class constructor.
    class ComponentA extends React.Component {
      constructor(props) {
        super(props);
        this.eventHandler = this.eventHandler.bind(this);
      }
      render() {
        return ( 
         
        );
      }

Bu iki yöntem, bileşen her zaman işlendiğinde yeni bir işlev oluşturmaz. bu nedenle, ChildComponent'ımız yeni işlev değişikliklerinde bencil olmayacak veya performans sorunu yaratamayacak.

0
katma

Bu adımları izleyerek bunu çözebilirsiniz.

SendContent işlevini ile değiştir

 sendContent(e) {
    console.log('sending input content '+this.refs.someref.value)
  }

Render işlevini değiştir

<input type="text" ref="someref" value={this.state.inputContent} 
          onChange={(event)=>this.changeContent(event)} /> 
   <button onClick={(event)=>this.sendContent(event)}>Submit</button>
0
katma

ES6'yı kullanıyorsunuz, böylece işlevler otomatik olarak "bu" içeriğe bağlanmıyor. Fonksiyonu manüel olarak bağlama bağlamalısınız.

constructor(props) {
  super(props);
  this.changeContent = this.changeContent.bind(this);
}
0
katma