Kann die Eigenschaft 'refs' von null nicht lesen. React js

Question

Ich benutze React js 0.14.3, ich versuche eine Side Menu-Komponente mit reactive zu erstellen, aber ich weiß nicht, warum ich ein "Can not read Eigenschaft "refs" von null "wenn ich die refs wie in der react-Dokumentation verwende: https://facebook.github.io/react/docs/more-about-refs.html Können Sie mir bitte helfen?

'use strict'; 

    import React from 'react'; 
    import BaseComponent from './../../BaseComponent.react'; 
    import Menu from './SidePanelMenu'; 
    import MenuItem from './SidePanelMenuItem'; 

    class SidePanel extends BaseComponent { 
     showLeft() { 
      this.refs.leftmenu.show(); 
     } 


     render() { 
      return(
       <div> 
        <button onClick={this.showLeft}>Show Left Menu!</button> 

        <Menu ref="leftmenu" alignment="left"> 
         <MenuItem hash="first-page">First Page</MenuItem> 
         <MenuItem hash="second-page">Second Page</MenuItem> 
         <MenuItem hash="third-page">Third Page</MenuItem> 
        </Menu> 
       </div> 
      ); 
     } 
    } 

    export default SidePanel; 

Answer 1

Sie müssen Kontext this binden.

Die Linie, wo Sie Ihre onClick Handler sind verbindlich:

onClick={this.showLeft} 

Bedürfnisse sein:

onClick={this.showLeft.bind(this)} 

Andernfalls, wenn Sie showLeft sind nennen es nicht this zugreifen können.

Answer 2

Könnte ein dieses Problem sein. versuchen

showLeft =() => { 
 
      this.refs.leftmenu.show(); 
 
     }

oder

constructor() { 
 
    super(); 
 
    this.showLeft = this.showLeft.bind(this); 
 
}

Answer 3

ändern diese:

<button onClick={this.showLeft}>Show Left Menu!</button> 

Um dies:

<button onClick={::this.showLeft}>Show Left Menu!</button>` 

Answer 4

Sie können auch so binden sie eslint Fehler von No .bind() or Arrow Functions in JSX Props zu vermeiden:

class SidePanel extends BaseComponent { 
    constructor(props) { 
     super(props); 
     this.showLeft = this.showLeft.bind(this); 
     this.state = { 
      error: false, 
     }; 
    } 

    showLeft() { 
     this.refs.leftmenu.show(); 
    } 


    render() { 
     return(
      <div> 
       <button onClick={this.showLeft}>Show Left Menu!</button> 

       <Menu ref="leftmenu" alignment="left"> 
        <MenuItem hash="first-page">First Page</MenuItem> 
        <MenuItem hash="second-page">Second Page</MenuItem> 
        <MenuItem hash="third-page">Third Page</MenuItem> 
       </Menu> 
      </div> 
     ); 
    } 
} 

Answer 5

Ihr Code geschrieben in ES6. Im Gegensatz zu ES5 gibt es in ES6 keine automatische Bindung.

Sie müssen also die Funktion explizit an die Komponenteninstanz binden, indem Sie this.functionName.bind(this) verwenden.

Wie so:

<button onClick={this.showLeft.bind(this)}>Show Left Menu!</button>

Ohne Bindung, wenn Sie auf die Schaltfläche klicken, wird der this auf die Schaltfläche bezieht sich auf die Schaltfläche selbst und nicht die Funktion. So versucht JavaScript, refs auf dem Button-Element zu finden, das diesen Fehler gibt.