Ich habe eine Komponente, die ich erstellt habe:
class Create extends Component {
constructor(props) {
super(props);
}
render() {
var playlistDOM = this.renderPlaylists(this.props.playlists);
return (
<div>
{playlistDOM}
</div>
)
}
activatePlaylist(playlistId) {
debugger;
}
renderPlaylists(playlists) {
return playlists.map(playlist => {
return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div>
});
}
}
function mapStateToProps(state) {
return {
playlists: state.playlists
}
}
export default connect(mapStateToProps)(Create);
Wenn ich render
diese Seite habe, activatePlaylist
wird für jeden playlist
in meinem aufgerufen map
. Wenn ich bind
activatePlaylist
mag:
activatePlaylist.bind(this, playlist.playlist_id)
Ich kann auch eine anonyme Funktion verwenden:
onClick={() => this.activatePlaylist(playlist.playlist_id)}
dann funktioniert es wie erwartet. Warum passiert das?
javascript
reactjs
redux
jhamm
quelle
quelle
React
dieser Art funktioniert hat . Erinnere ich mich falsch oder hat sich dasapi
geändert?.bind
, wie Sie in Schritt 1 sagen, ist es notwendig, Schritt 2 auszuführen? und wenn ja, warum? Weil ich denke, wenn Sie die Pfeilfunktion verwenden, ist der Kontext derjenige, in dem die Funktion definiert wurde, aber wenn wir den Kontext mit.bind
anhängen, ist der Kontext bereits angehängt, oder?Dieses Verhalten wurde dokumentiert, als React die Veröffentlichung klassenbasierter Komponenten ankündigte.
https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html
quelle
Ich weiß, dass dieser Beitrag bereits einige Jahre alt ist, aber nur um auf das neueste React-Tutorial / die neueste Dokumentation zu diesem häufigen Fehler (ich habe es auch gemacht) von https://reactjs.org/tutorial/tutorial.html zu verweisen :
quelle
Die Art und Weise, wie Sie die Methode übergeben
1.this.activatePlaylist(playlist.playlist_id)
, ruft die Methode sofort auf. Sie sollten den Verweis der Methode an dasonClick
Ereignis übergeben. Befolgen Sie eine der unten aufgeführten Implementierungen, um Ihr Problem zu beheben.Hier wird die Eigenschaft bind verwendet, um eine Referenz der
2.this.activatePlaylist
Methode zu erstellen, indemthis
Kontext und Argument übergeben werdenplaylist.playlist_id
Dadurch wird dem onClick-Ereignis eine Funktion hinzugefügt, die nur bei einer Benutzerklickaktion ausgelöst wird. Wenn dieser Code ausgeführt wird, wird die
this.activatePlaylist
Methode aufgerufen.quelle