Question

我最近安装了一个npm软件包，并设置了从中导出的组件的方式，使得必须单击该组件并按住另一个鼠标按钮才能使其正常工作，例如类似于WhatsApp上的“录制音频”按钮。现在，我希望通过单击激活该按钮。我有什么办法可以做到这一点？

下面是一些希望对您有所帮助的代码

import Recorder from 'react-mp3-recorder'

class{
...
render(){
...
return(
<Recorder
        onRecordingComplete={this._onRecordingComplete}
        onRecordingError={this._onRecordingError}
    >

然后在包的github存储库中，我打开了索引文件

 return (
      <div
        className={classNames(styles.container, className)}
        {...rest}
      >
        <div
          className={styles.button}
          onMouseDown={this._onMouseDown}
          onMouseUp={this._onMouseUp}
        >
          <img src={micIcon} width={24} height={24} />
        </div>
      </div>
    )
  }

  _cleanup() {
    if (this._recorder) {
      this._recorder.stopRecording()
      this._recorder.close()
      delete this._recorder
    }
  }

  _onMouseDown = () => {
    const {
      recorderParams
    } = this.props

    this._cleanup()

    this._recorder = new vmsg.Recorder({
      wasmURL,
      shimURL,
      ...recorderParams
    })

    this._recorder.init()
      .then(() => {
        this._recorder.startRecording()
        this.setState({ isRecording: true })
      })
      .catch((err) => this.props.onRecordingError(err))
  }

  _onMouseUp = () => {
    if (this._recorder) {
      this._recorder.stopRecording()
        .then((blob) => this.props.onRecordingComplete(blob))
        .catch((err) => this.props.onRecordingError(err))
    }
  }
}

谢谢！

导致一个标签点击另一个

0 个答案: