在 React 中模拟长按、长标签答案

【问题标题】：Simulate long-press, long tab in React在 React 中模拟长按、长标签
【发布时间】：2020-03-11 07:39:31
【问题描述】：

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

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

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

这可能吗？

谢谢！

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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

你可以从他们的code 看到他们有你可以使用的_onMouseDown 和_onMouseUp 函数。

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

【讨论】：