时间戳

首页 > 解决方案 > 在 React 中模拟长按、长标签

reactjs - 在 React 中模拟长按、长标签

问题描述

我正在尝试在 React 中实现录音。我能找到的最好的免费图书馆是：

https://www.npmjs.com/package/react-mp3-recorder

但是该库仅公开了一个您必须在录制时长按的按钮。这不是我想要的。我想要一个开始录制和结束录制的按钮。现在我试图找到解决这个问题的最简单方法。一种想法是使用 react/JS 简单地模拟长按事件。

这有可能吗？

谢谢！

标签： reactjs

解决方案

我不会说模拟事件是最好的方法，而是直接回答这个问题：是的，你可以模拟事件。

class MyApp extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isRecording: false
    }
    this.myClick = this.myClick.bind(this)
  }
  myClick () {
    let recorder = document.getElementById('recorder').childNodes[0].childNodes[0]
    if (this.state.isRecording) {
      let pressStart = new Event('mousedown')
      pressStart.target = recorder
      this.setState({isRecording:true}, () => window.dispatchEvent(pressStart))
    }
    else {
      let pressEnd = newEvent('mouseup')
      pressEnd.target = recorder
      this.setState({isRecording:false}, () => window.dispatchEvent(pressEnd))
    }
  }
  render () {
    return (
      <section>
        <button onClick={this.myClick}>Start/Stop</button>
        <div id='recorder'>
          <Recorder />
        </div>
      </section>
    )
  }
}

您必须使用 css 隐藏默认记录按钮，display:none以便它无法获取实际的 mousedown 和 mouseup 事件。

我实际上建议尝试扩展 Recorder 组件并覆盖渲染，但我还没有能够成功地做到这一点：

// example, not fully-functional snippet
class MyRecorder extends Recorder {
  render () {
    return (
      <button></button>
    )
  }
}

您可以从他们的代码中看到他们拥有_onMouseDown和_onMouseUp您可以使用的功能。

扩展 Recorder 组件并非万无一失，您可能会遇到这个问题，但现代浏览器似乎会接受它。

推荐阅读