Wie kann ich mit React mehrere Elemente mit unterschiedlichen Werten aktualisieren?

Question

haben eine einfache Musik-App, die ich mache. Ich habe 7 Radiostation-Tasten eingerichtet, um die gleichen Elemente auf 7 verschiedene Arten zu aktualisieren. Ich möchte den MP3-Dateipfad (src-Attribut), den Namen des Songs, den Namen des Künstlers und den Namen der Station aktualisieren.

Dies ist ein Beispiel dafür, wie es in meinem jQuery-Code sieht ...

$('.deg295').click(function() { //One of the buttons 

$('audio source').attr('src', 'music/panda.mp3'); //The mp3 filepath 

$('.labels p:nth-child(1) em').text("Urban Beach Radio") //The station name 

$('.labels p:nth-child(2)').text("PANDA"); //The song name 

$('.labels p:last-child').text("Desiigner"); // The artist name 

radio.load(); 
radio.play(); 
}); 

Inzwischen hier die fragliche Komponente ist ...

var React = require('react'); 

let rock = require('../images/pngs/rock.png'); 
let none = require('../images/pngs/none.png'); 
let blue = require('../images/pngs/blue.png'); 
let flash = require('../images/pngs/flash.png'); 
let estim = require('../images/pngs/estim.png'); 
let urban = require('../images/pngs/urban.png'); 
let intl = require('../images/pngs/intl.png'); 

//The radioClass prop == "radio" 
export default class Radio extends React.Component { 

    render() { 
     return (
    <section className={this.props.radioClass}> 

    <div className="septagon"> 

     //These are the 3 labels I want to update onClick 
     <div className="labels"> 
      <p> 
       <em></em> 
      </p> 
      <p>Radio</p> 
      <p>Off</p> 
     </div> 
     //The 7 buttons are below 
     <span className="deg40"><img src={rock} alt="" /></span> 
     <span className="deg90"><img src={none} alt="" /></span> 
     <span className="deg140"><img src={blue} alt="" /></span> 
     <span className="deg195"><img src={flash} alt="" /></span> 
     <span className="deg245"><img src={estim} alt="" /></span> 
     <span className="deg295"><img src={urban} alt="" /></span> 
     <span className="deg345"><img src={intl} alt="" /></span> 

     //The audio element with the mp3 filepath that I also want to update 
     <audio id="playmusic" preload="none"> 
      <source type="audio/mpeg" src="" id="audio"/> 
     </audio> 
    </div> 
    </section> 
) 

Answer 1

Unten ist ein wenig Mock-Code für du, vielleicht kann es dir helfen.

export default class Radio extends React.Component { 

    constructor() { 
    // initializing the current selection with empty object. 
    this.state = { 
     current_selection: {} 
    }; 
    } 

    handleChangeSelection(selection) { 
    // update the state with new data, 
    // so that react will see state change and re-render component 
    this.setState({ 
     current_selection: selection 
    }) 
    } 

    render() { 
    return (
     <section className={this.props.radioClass}> 

     {/* //The 7 buttons are below */} 
     <span 
      className="deg40" 
      onClick={() => handleChangeSelection({ 
      // deg40 related data 
      src: 'music/panda.mp3', 
      song_name: 'PANDA', 
      station_name: 'Urban Beach Radio', 
      artist_name: 'Desiigner' 
      })} 
     > 
      <img src={rock} alt="" /> 
     </span> 

     {/* 
      use this.state.current_selection where ever you want to, 
      and it will be updated automatically upon triggering `handleChangeSelection`, 
     */} 
     <label>Song Name: {this.state.current_selection.song_name}</label> 
     <label>Station Name: {this.state.current_selection.station_name}</label> 
     <label>Artist Name: {this.state.current_selection.artist_name}</label> 
     <audio id="playmusic" preload="none"> 
      <source type="audio/mpeg" src={this.state.current_selection.src} id="audio"/> 
     </audio> 

     </section> 
    ) 
    } 


} 

Dies ist das Design, dem Sie folgen sollten.

Speichern Sie Ihre current selection in den Zustand der Komponente, und verwenden Sie es wo immer Sie wollen, dass es in Zukunft mit neu ausgewählten Daten aktualisieren (ich denke, <audio> in Ihrem Fall).

Jetzt, um es bei mehreren Ereignissen zu ändern (verschiedene Knopfklicks, in Ihrem Fall), müssen Sie eine einzelne Funktion erstellen, die den Zustand mit neuen Daten aktualisiert (Sie müssen die neuen Daten vom Ursprung des Ereignisses übergeben) , wo Sie diese Funktion aufrufen) und wenn der Status geändert wird, wird die Komponente die Komponente automatisch neu rendern.