Question

我有4 span onClick={this.clickhandler}。 clickhandler内部有一个我想点击时播放的音频。问题是，我想在同一clickhandler内有4个不同的音频网址。如何将每个span与音频字符串相关联并将其传递给同一个eventhandler？

＆＃13;

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

＆＃13;

编辑：我尝试了下面的解决方案但是我收到了这个错误：你提供的错误不包含堆栈跟踪。

现在这是我的代码：

＆＃13;

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

＆＃13;

Answer 1

在React中，尝试思考类似组件。

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

您可以将其作为第二个参数传递给处理程序：

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 3

您可以使用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>
        )
    }

如何将道具传递给eventhandler？

3 个答案: