声音云SC.stream api没有按照希望做出反应

时间:2015-11-11 01:10:28

标签: reactjs soundcloud

我们有下面的反应组件,当点击图像时,我们正在开始从soundcloud流式传输歌曲。但是当歌曲被列出时,所有歌曲都在同一时间播放..任何建议都值得赞赏..

    .model small
    .stack  100h

    .data
            filename    db 255 dup(0)
            text        db 255 dup(0)
            char        db ?
            line        db 255 dup(0)

            filehandle  dw ?

    .code
            newline macro    ;NEW LINE
                             ;
            mov dl, 10       ;
            mov ah, 02h      ;
            int 21h          ;
                             ;
            mov dl, 13       ;
            mov ah, 02h      ;                     ;
            int 21h          ;
            endm             ;NEW LINE
    main:

            mov ax, @data
            mov ds, ax

            lea si, filename
            mov ah, 01h      ;read character

    char_input:

            int 21h

            cmp al, 0dh      ;enter
            je zero_terminator

            mov [si], al
            inc si

            jmp char_input

    zero_terminator:

            mov byte ptr [si], 0

    open_file:

            lea dx, filename
            mov al, 0
            mov ah, 3Dh      ;open file
            int 21h

            mov filehandle, ax

            lea si, text

            newline

    read_line:
            mov ah, 3Fh      ;read file
            mov bx, filehandle
            lea dx, char
            mov cx, 1

            int 21h

            cmp ax, 0       ;EOF
            je EO_file

            mov al, char

            cmp al, 0ah     ; line feed
            je LF

            mov [si], al
            inc si

            jmp read_line

    EO_file:

            lea dx, text    ;DX=offset(address) of text
            mov ah, 40h     ;print
            mov cx, si      ;CX = # characters. Move pointer to last char to it
            sub cx, dx      ;Subtract the offset of text (in DX) from CX
                            ;To get the actual number of chars in the buffer
            mov bx, 1
            int 21h

            mov ah, 4ch
            int 21h

    LF:
            lea dx, text    ;DX=offset(address) of text
            mov ah, 40h     ;print
            mov cx, si      ;CX = # characters. Move pointer to last char to it
            sub cx, dx      ;Subtract the offset of text (in DX) from CX
                            ;To get the actual number of chars in the buffer
            mov bx, 1

            int 21h

            mov si, dx      ;Start from beginning of buffer 
                            ;(DX=beginning of text buffer)
            jmp read_line

     end main

1 个答案:

答案 0 :(得分:1)

你应该为此创建一个子组件,每个组都有自己的onClick。目前,您为每一行调用相同的函数,并在渲染时同时调用它们。

var TableRows = React.createClass({
    render: function(){
        var track = this.props.track;
        return (
            <tr ref="trackRow">
                <td>{track.title}</td>
                <td><img onClick={ this.playTrack } className="images" src={track.artwork_url}/></td>
            </tr>
        );
    },
    playTrack: function(){
        // use the track in your props aka... this.props.track

    }
});

然后将您的foreach更改为map并执行此操作

this.props.data.map(function(track, i) {
    rows.push(<TableRows track={track} key={i} />);
});

注意:这是对你的行渲染的清理......如果你注意到你正在渲染它时调用playTrack函数... onClick={context.playTrack(track)}实际上是调用函数然后那里..所以你我想不要用括号调用它,并为每一行使用一个组件,这样你就可以访问道具中的轨道了。