Réagir onClick à l'intérieur .la carte puis de modifier des données dans une autre composante de la fratrie

Jour 1 à Réagir et je ne suis pas voyant un moyen d'obtenir le < button> onClick={présent.accessoires de jeu.handleClickPlay}>Jeu < /button> à la lecture de l'audio. Si je le déplacer sous {audioListNodes} le bouton fonctionne très bien. J'aimerais avoir chaque lien lire un fichier audio distinct, par la suite mais pour l'instant simplement de jouer le même fichier est une victoire, mais le déplacement du gestionnaire d'événement dans la liste, il tue. Je suppose que c'est parce que CE n'est plus le référencement AudioList mais plutôt var de données? Une fois que j'ai le bouton de tir comment puis-je l'ID du bouton qui a été cliqué et modifier le AudioObject source?

    var data = [
{voice: "Drew", file:"Drew.mp3", volume: 90},
{voice: "Chris", file:"Chris.mp3", volume: 85},
{voice: "Patrick", file:"Patrick.mp3", volume: 85},
{voice: "Everett", file:"Everett.mp3", volume: 60},
];
var AudioList = React.createClass({
render: function() {
var audioListNodes = this.props.data.map(function(el, index) {
return (
<div author={el.voice}>
{el.file}
<button onClick={this.props.handleClickPlay}>Play</button>
</div>
);
});  
return (
<div className="audioList">
{audioListNodes}
</div>
);
}
});
var AudioObject = React.createClass({
play: function () {
var audio = this.getDOMNode();
audio.load();
audio.play();
},
render: function() {
return (
<audio preload="auto" controls="true" autoPlay="">
<source src='female/DeDe Splaingard.mp3'></source>
Your browser does not support audio.
</audio>
);
} 
});
var App = React.createClass({
handleClickPlay: function() {
this.refs.audioObject.play()
},
render: function() {
return (
<div>
<AudioObject ref="audioObject" />
<AudioList data={this.props.data} handleClickPlay={this.handleClickPlay} />
</div>
);
} 
}); 
ReactDOM.render(
<App data={data} />,
document.getElementById('content')
);

Double Possible de "this" n'est pas défini à l'intérieur de la carte de fonction Reactjs

OriginalL'auteur Adam L | 2016-01-22

reactjs

12

Vous avez à bind(cet) à la fonction anonyme, puisque le contexte à l'intérieur de .map changements:
```
var audioListNodes = this.props.data.map(function(el, index) {
return (
<div author={el.voice}>
{el.file}
<button onClick={this.props.handleClickPlay}>Play</button>
</div>
);
}.bind(this));
```
Une autre option est de commencer à utiliser ES6 flèche fonctions, qui lexicalement passer this:
```
var audioListNodes = this.props.data.map((el, index) => {
return (
<div author={el.voice}>
{el.file}
<button onClick={this.props.handleClickPlay}>Play</button>
</div>
);
});
```
Comme @Henrik Andersson, mentionné dans les commentaires, vous pouvez également passer this directement à map.
```
var audioListNodes = this.props.data.map(function(el, index) {
return (
<div author={el.voice}>
{el.file}
<button onClick={this.props.handleClickPlay}>Play</button>
</div>
);
}, this);
```
.map() prend également un second argument, this qui permettra de définir le contexte du droit.
qui savait! Viens de modifier ma réponse à inclure, merci.
Parfait! Fonctionne comme un charme maintenant. Plusieurs tutoriels j'ai lu jusqu'à présent n'ont pas structuré de la façon dont j'ai cela avec un événement à l'intérieur d'une boucle donc il n'était même pas sûr si je le faisais, le "Réagir de Manière". Merci encore
Ok une autre question. Si le AudioList composant détient les boutons (événements) et de Réagir uniquement les données de flux d'une manière à partir de l'App --> AudioList alors comment puis-je l'ID de ce que le bouton a été cliqué et l'envoyer à l'AudioObject composant de sorte que les utilisateurs sur les modifications de l'audio joué? N'toute la logique nécessaire pour vivre dans l'Application, cela ne semble pas juste. Semble comme si j'avais besoin de passer de l'état de AudioList App pour AudioObject? OMG je pensais que cela allait être une simple Réagir exemple d'application.
tl;dr: passer le onClick gestionnaire de App à AudioList via AudioList's accessoires. De cette façon, vous pouvez l'appeler en AudioList et il va changer l'état de App (causant à la fois de re-rendre). Une longue explication: poser une nouvelle question 🙂

OriginalL'auteur Matthew Herbst

Vous devez ajouter cette .map(), parce qu'à l'intérieur de .carte (cela fait référence à la fenêtre ou indéfini lorsque en mode strict.

var audioListNodes = this.props.data.map(function(el, index) {
return (
<div author={el.voice}>
{el.file}
<button onClick={this.props.handleClickPlay}>Play</button>
</div>
);
}, this);
! here !

OriginalL'auteur Alex Pivtorak

Vous devez vous connecter pour publier un commentaire.