React.js#4

Callbacks

Vi skal kort se på hvordan man kommer frem og tilbage mellem komponenter i react. Lige nu viser vi en liste med poster i PostDetail. Men hvad hvis PostDetail skulle sende noget tilbage til PostList – for eksempel når der bliver klikket på en post?

Lad os først se på PostDetail. Click events registreres ret enkelt – simpelthen ved at lave et onClick event direkte på html elementet:

<h1 onClick={this.titleClicked}>{post.title}</h1>

titleClicked er en metode vi selv vil implementere – den skal sende objektet der blev klikket på tilbage til PostList, samt måske en tekstbesked:

     titleClicked(){
callback('Hi', this)
}

MEN for at få fat i “this”, er vi nødt til at lave noget javascript voodoo. Navnlig må vi give klassen PostDetail en constructor, som binder dens metode titleClicked til klassen. Skriv hele filen så den gør følgende:

import React, {Component} from 'react';

class PostDetail extends Component {
constructor(props){
//Gør props tilgængelige globalt
super(props)
this.titleClicked = this.titleClicked.bind(this)
}
titleClicked(){
const {callback} = this.props
callback('Hi', this)
}
render() {
const {post} = this.props
return (
<div>
<h1 onClick={this.titleClicked}>{post.title}</h1>
<p>{post.content}</p>
</div>
)
}
}

export default PostDetail ;

Og gør nu det samme med PostList:

import React, {Component} from 'react';
import PostDetail from './PostDetail';
import PostData from "../data/posts.json";


class Postlist extends Component {
constructor(props){
super(props)
this.handleCallback = this.handleCallback.bind(this)
}
handleCallback(msg, obj){
console.log(this)
}
render() {
return (
<div>
<h1> Hello there from postlist</h1>
{PostData.map((item, index)=>{
return (
<PostDetail
post={item}
key={index}
callback = {this.handleCallback}
/>
)
})}
</div>
);
}
}

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *