Wie man Requisite an Eventhandler übergibt?

Question

Ich habe 4 span mit onClick={this.clickhandler}. Innerhalb der clickhandler gibt es eine Audio, die ich spielen möchte, wenn Sie darauf klicken. Das Problem ist, ich möchte 4 verschiedene Audio-URLs innerhalb der gleichen clickhandler. Wie kann ich jede span mit einer Audio-Zeichenfolge verknüpfen und an dieselbe eventhandler übergeben?

clickhander(e) { 
 
    const audio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'); 
 
    audio.play() 
 
    console.dir(e.target) 
 
} 
 
render() { 
 
    return(
 
     <div className="container"> 
 
      <h1 className="header">Simon Game</h1> 
 
      <span onClick={this.clickhander}>  
 
       <Heart fill="#555"/> 
 
      </span> 
 
      <span onClick={this.clickhander}> 
 
       <Heart fill="#402" /> 
 
      </span> 
 
      <span onClick={this.clickhander}> 
 
       <Heart fill="#f39" /> 
 
      </span> 
 
      <span onClick={this.clickhander}> 
 
       <Heart fill="#29f" /> 
 
      </span> 
 
     </div> 
 
    ) 
 
}

EDIT: Ich habe versucht, die Lösungen unten, aber ich bekomme diese Fehlermeldung: Der Fehler, den Sie nicht einen Stack-Trace versehen enthält.

dies ist mein Code jetzt:

clickhander(e, url) { 
 
    const audio = new Audio(url); 
 
    audio.play() 
 
    console.dir(e.target) 
 
} 
 
render() { 
 
    return(
 
     <div className="container"> 
 
      <h1 className="header">Simon Game</h1> 
 
      <span onClick={(e) => this.clickhander(e, "url1")}>  
 
       <Heart fill="#555"/> 
 
      </span> 
 
      <span onClick={(e) => this.clickhander(e, "url2")}> 
 
       <Heart fill="#402" /> 
 
      </span> 
 
      <span onClick={(e) => this.clickhander(e, "url3")}> 
 
       <Heart fill="#f39" /> 
 
      </span> 
 
      <span onClick={(e) => this.clickhander(e, "url4")}> 
 
       <Heart fill="#29f" /> 
 
      </span> 
 
     </div> 
 
    ) 
 
}

Answer 1

In Reaktion, versuchen bauteilähnlichen zu denken.

app.js

class App extends Component { 

    audioArr = ['link1', 'link2', 'link3']; // links to songs 

    render() { 
    return (
     <div className="App"> 
     {this.audioArr.map((link, i) => (
      <Player link={link} key={i} /> 
     ))} 
     </div> 
    ) 
    } 
} 

Player.js

class Player extends Component { 

    handleClick =() => { 
    const audio = new Audio(this.props.link); 
    audio.play(); 
    }; 

    render() { 
    return (
     <div> 
     <span onClick={this.handleClick}> 
      <Heart fill="#29f" /> 
     </span> 
     </div> 
    ); 
    } 
} 

Answer 2

Sie es als zweiter Parameter an Ihren Handler passieren kann können bind() an den Handler zu befestigen, was Sie

clickhander(val, e) { 
 
     console.log("value passed " + val) 
 
    } 
 
    render() { 
 
     return(
 
      <div className="container"> 
 
       <h1 className="header">Simon Game</h1> 
 
       <span onClick={this.clickhander.bind(this, "val1")}>  
 
        <Heart fill="#555"/> 
 
       </span> 
 
       <span onClick={this.clickhander.bind(this, "val2")}> 
 
        <Heart fill="#402" /> 
 
       </span> 
 
       <span onClick={this.clickhander.bind(this, "val3")}> 
 
        <Heart fill="#f39" /> 
 
       </span> 
 
       <span onClick={this.clickhander.bind(this, "val4")}> 
 
        <Heart fill="#29f" /> 
 
       </span> 
 
      </div> 
 
     ) 
 
    }

Answer 3

Sie:

class Home extends Component { 
 

 
    constructor(props){ 
 
     super(props) 
 
    } 
 
    clickhander(e, url) { 
 
     const str = url 
 
     const audio = new Audio(String(str)); 
 
     audio.play() 
 
     
 
    } 
 
    render() { 
 
     return(
 
      <div className="container"> 
 
       <h1 className="header">Simon Game</h1> 
 
       <span onClick={this.clickhander.bind(this, "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3")}>  
 
        <Heart fill="#555"/> 
 
       </span> 
 
       <span onClick={this.clickhander}> 
 
        <Heart fill="#402" /> 
 
       </span> 
 
       <span onClick={this.clickhander}> 
 
        <Heart fill="#f39" /> 
 
       </span> 
 
       <span onClick={this.clickhander}> 
 
        <Heart fill="#29f" /> 
 
       </span> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
export default Home