React-Komponente ruft onClick-Handler nicht auf

Question

Ich habe eine Komponente mit es6 Klassensyntax erstellt. Es ist eine einfache Komponente mit nur einem vielfältigen und etwas Styling. Dann möchte ich in der übergeordneten Komponente (app genannt) diese Komponente rendern und ihr ein onClick geben, das den onclick-Handler der Eltern aufruft. Bisher machen die Eltern das Kind etwa so:

<child_component onClick={this.clickhandler}> 

Und dann habe ich eine Methode in dieser übergeordneten Komponente, die ich auf den übergeordneten Kontext in dem Konstruktor gebunden habe.

Die Komponente rendert, aber der Click-Handler wird nie aufgerufen, wenn ich auf die Komponente klicke. Irgendeine Idee warum?

Answer 1

Da untergeordnete Komponente kein natives DOM-Element ist, sondern eine andere React-Komponente, ist onClick wie hier definiert einfach eine Eigenschaft dieser Komponente. Was Sie tun müssen, ist, im Inneren des Kindes Komponente der onClick der prop passieren Ereignis onClick auf ein DOM Komponente:

var ChildComponet= React.createClass({ 
render: function() { 
return (
    <div className="childcomponent" onClick={this.props.onClick}> 
    ... 
    </div> 
); 
} 
});