知识点:
子组件给父组件传值:
参考:http://taobaofed.org/blog/2016/11/17/react-components-communication/

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/**
* 基于react的audio组件
* @param {Array} courseWareList 课件列表
* @buttonResponse {function} 回调audio组件,控制每个audio的属性
* @author frank
* @description
*/
import React from 'react';
import Audio from './audio';

class orderRecordCourseDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
courseWareList: []
}
}

//回调audio组件的值
buttonResponse(list, id, flag) {
console.log(list, id, flag)
list[id].isPlay = flag;
console.log(67, "list值", list[id]);
const that = this;
that.setState({ courseWareList: list });
}
render() {
const that = this;
return (
'course-information-page'
>
    'resources'
>
{
this.state.courseWareList.map(function (obj, i) {
obj.fileType = Util.checkFileType(obj.courseCoursewareName, obj.courseCoursewareType)
return (


  • src={obj.courseCoursewareUrl} id={i} courseCoursewareName={obj.courseCoursewareName}
    courseWareList={that.state.courseWareList} isPlay={obj.isPlay} />
    </li>
    )
    }, this)
    }
    l>
    </div>

    )
    }
    }


    export default orderRecordCourseDetail

    子组件 audio.jsx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    import React from 'react'
    import './audio.scss';

    class audio extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    isMuted: false,
    volume: 100,
    allTime: 0,
    currentTime: 0
    }
    }
    componentWillMount() {
    }
    // 暂停函数
    pauseAll() {
    let audios = document.getElementsByTagName("audio");
    var self = this;
    [].forEach.call(audios, function (i) {
    // 将audios中其他的audio全部暂停
    i !== self && i.pause();
    })
    }
    controlAudio(type, value) {
    console.log("controlAudio---type", type);
    const { id, src } = this.props;
    let that = this;
    const audio = document.getElementById(`audio${id}`);
    let courseWareList = this.props.courseWareList;
    let audios = document.getElementsByTagName("audio"); // 获取所有audios
    // 给play事件绑定暂停函数
    [].forEach.call(audios, function (i) {
    i.addEventListener("play", that.pauseAll.bind(i));
    })
    switch (type) {
    case 'allTime':
    this.setState({
    allTime: audio.duration
    })
    break
    case 'play':
    // 解决音频文件暂停和播放操作间隔时间问题;
    let isPlaying = audio.currentTime > 0 && !audio.paused && !audio.ended && audio.readyState > 2;
    if (!isPlaying) {
    setTimeout(function () {
    audio.play().
    catch(function (e) {
    console.log("", e.message);
    console.log("", e.description);
    });
    }, 150);
    } else {
    alert("网络缓慢,正在加载音频...");
    }
    courseWareList.map(function (item, index) {
    if (that.props.id == index) {
    courseWareList[index].isPlay = true;
    } else {
    courseWareList[index].isPlay = false;
    }
    })
    console.log("courseWareList.map", courseWareList)
    that.props.closeAllAudio(courseWareList, this.props.id, true);
    audio.play();
    break
    case 'pause':
    audio.pause();
    // this.setState({
    // isPlay: false
    // })
    courseWareList.map(function (item, index) {
    courseWareList[index].isPlay = false;
    })
    console.log("courseWareList.map", courseWareList)
    that.props.closeAllAudio(courseWareList, this.props.id, false);
    break
    case 'muted':
    this.setState({
    isMuted: !audio.muted
    })
    audio.muted = !audio.muted
    break
    case 'changeCurrentTime':
    let range = document.getElementById(`range${id}`);
    this.setState({
    currentTime: range.value
    });
    console.log(range.value);
    if (range.value) {
    audio.currentTime = range.value
    }

    if (value == audio.duration) {
    this.setState({
    isPlay: false
    })
    }
    break
    case 'getCurrentTime':
    this.setState({
    currentTime: audio.currentTime
    })

    if (audio.currentTime == audio.duration) {
    courseWareList.map(function (item, index) {
    courseWareList[index].isPlay = false;
    })
    }
    break
    case 'changeVolume':
    audio.volume = value / 100
    this.setState({
    volume: value,
    isMuted: !value
    })
    break
    }
    }
    millisecondToDate(time) {
    const second = Math.floor(time % 60)
    let minite = Math.floor(time / 60)
    // let hour
    // if(minite > 60) {
    // hour = minite / 60
    // minite = minite % 60
    // return `${Math.floor(hour)}:${Math.floor(minite)}:${Math.floor(second)}`
    // }
    return `${minite}:${second >= 10 ? second : `0${second}`}`
    }

    render() {
    const id = this.props.id;
    const src = this.props.src;
    let isPlay = this.props.isPlay;
    const courseCoursewareName = this.props.courseCoursewareName;
    let currentTime = this.state.currentTime;
    let allTime = this.state.allTime;
    return (

    "audioBox "
    >
    } src={src} preload={true}
    onCanPlay={() => this.controlAudio('allTime')}
    onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}
    >
    您的浏览器不支持 audio 标签。
    </audio>

    {courseCoursewareName}div>


    className={isPlay ? 'pause' : 'play'}
    onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')}>
    i>

    </div>



    type="range"
    className="time"
    step="0.01"
    max={allTime}
    value={currentTime}
    onChange={(value) => this.controlAudio('changeCurrentTime', id)}
    onClick={(value) => this.controlAudio('changeCurrentTime', id)}
    />
    " " >progress>

    </div>

    {this.millisecondToDate(allTime)}
    span>
    </div>



    div>
    </div>

    )
    }
    }

    export default audio

    转载请保持原始链接

    原始链接: https://ru23.com/note/de6d4618.html