如何將prop傳遞給eventhandler？

我有4 span與onClick={this.clickhandler}。在clickhandler裏面有一個音頻，我想單擊時播放。問題是，我想要在同一個clickhandler內的4個不同的音頻網址。我怎樣才能將每個span與一個音頻字符串關聯，並將它傳遞給相同的eventhandler？如何將prop傳遞給eventhandler？

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> 
 
    ) 
 
}

編輯：我嘗試下面的解決方案，但我得到這個錯誤：您所提供的錯誤不包含堆棧跟蹤。

這是我現在的代碼：

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

來源

2017-07-04 Hyrule

在什麼做出反應，再想想組件等。

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> 
    ); 
    } 
}

來源

2017-07-04 15:12:27

不想該溶液中使用綁定或匿名函數的其他解決方案。每次組件重新呈現時，它們都會創建一個新的函數，這將需要垃圾回收，並隨着時間的推移減慢應用程序的速度。 –

您可以將它作爲第二個參數到您的處理：

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> 
 
    ) 
 
}

來源

2017-07-04 15:00:49

你可以使用bind()附加到處理您想

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> 
 
     ) 
 
    }

來源

2017-07-04 15:02:43 flocks

@尼科洛也較快 – flocks

如何將prop傳遞給eventhandler？

回答

相關問題