Undefiniert beim Versuch, Daten zwischen Komponenten zu übergeben

Question

Zuerst bin ich neu in React. Ich habe zwei Komponenten TagUtils und Urls. Ich versuche Router Parameter von Urls zu TagUtils zu übergeben. Hier ist meine Codes:

Urls.jsx

// some codes.... 
export default class Urls extends React.Component { 

render() { 
return (
    <div> 
     <TagUtils tag={this.props.params.tag_id}/> 
    </div> 
) 
} 
} 

TagUtils.jsx

export default class TagUtils extends React.Component { 

    deleteTag(props) { 
     console.log(props.tag); 
    } 

    render() { 
     return (
      <div className="col-xs-6 col-md-4"> 
       <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button> 
      </div> 
     ) 
    } 
} 

Wenn ich Schaltfläche Löschen geklickt es nur zeigen undefined .maybe ich bin etwas fehlt.

Answer 1

Mit der Verschiebung von React von createClass auf ES6 classes müssen wir den korrekten Wert von this für unsere eigenen Methoden verwenden, wie hier erwähnt: http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes Code ändern Sie die Methode begrenzt haben Wert dieses in Konstruktor zu beheben:

export default class TagUtils extends React.Component { 
    constructor(props) { 
     super(props); 
     this.deleteTag = this.deleteTag.bind(this); 
    } 

    deleteTag(props) { 
    console.log(props.tag); 
    } 

    render() { 
    return (
     <div className="col-xs-6 col-md-4"> 
      <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button> 
     </div> 
    ) 
    } 
} 

Die no autobinding war ein bewusster Schritt von Jungs Reagieren für ES6 Klassen. Autobinding zum korrekten Kontext wurde mit React.createClass bereitgestellt. Details hierzu finden sich hier: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

So auf dieser Basis auch Ihren Code ändern könnte wie:

export default class TagUtils extends React.Component { 
    deleteTag = (props) => { 
    console.log(props.tag); 
    } 

    render() { 
    return (
     <div className="col-xs-6 col-md-4"> 
      <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button> 
     </div> 
    ) 
    } 
} 

Answer 2

In Ihrem Beispiel props ist event Objekt, wo es keine tag Eigenschaft -. Das ist, warum Sie undefined bekommen, Sie setzen müssen this für deleteTag und dann können Sie Komponente props durch this.props innerhalb deleteTag Methode erhalten

export default class TagUtils extends React.Component { 
    constructor() { 
    this.deleteTag = this.deleteTag.bind(this); 
    } 

    deleteTag() { 
    console.log(this.props.tag); 
    } 

    render() { 
    return (
     <div className="col-xs-6 col-md-4"> 
     <button type="button" className="btn btn-danger" onClick={this.deleteTag}> 
      <i className="fa fa-trash"> Delete</i> 
     </button> 
     </div> 
    ) 
    } 
}