代码之家 › 专栏 › 技术社区 › jdog

为什么在reactjs中没有调用我的方法?

reactjs

jdog · 技术社区 · 3 年前

startRecording, stopRecording 参数被传递到控制中?

我有另一个组件,需要在单击stopRecording和stopRecording按钮后调用一个内部方法。

function RecordAudio() {
  isVideo = false;
  return (
    <ReactMediaRecorder
      audio
      render={({ status, startRecording, stopRecording, previewStream, mediaBlobUrl }) => (
        <Row>
          {status === 'recording' ? (
            <AudioPreview stream={previewStream} />
          ) : (
            <audio src={mediaBlobUrl} controls autoPlay />
          )}
          <Controls
            status={status}
            startRecording={startRecording}
            stopRecording={stopRecording}
            mediaBlobUrl={mediaBlobUrl}
          />
        </Row>
      )}
    />
  );
}




  function Controls({ status, startRecording, stopRecording, mediaBlobUrl }) {
    const [copied, setCopied] = useState(false);
    const [url, setURL] = useState('');
  storage.ref(path).getDownloadURL().then(setURL);
}
return (
  <Row>
    {/* <span className='uk-text-meta'>{status}</span> */}
    <button className='uk-margin-small-left' type='button' onClick={startRecording} disabled={status === 'recording'}>
      Start
    </button>
    <button className='uk-margin-small-left' type='button' onClick={stopRecording} disabled={status === 'stopped'}>
      Stop
    </button>
    <Row>
      {status === 'recording' ? (
        <FaSpinner icon='spinner' className='spinner' />
      ) : (
        <button
          className='uk-margin-small-left'
          type='button'
          onClick={uploadFile}
          disabled={status !== 'stopped'}
          hidden={status === 'idle'}
        >
          {!copied ? 'Copy link' : 'Copied!'}
        </button>
      )}
    </Row>

    {/* <Delayed waitBeforeShow={10000}>
      <button className='uk-margin-small-left' type='button' onClick={uploadFile} disabled={status !== 'stopped'}>
        done
      </button>
    </Delayed> */}
    {url && (
      <a className='uk-margin-small-left' href={url} target='_blank' rel='noopener noreferrer'>
        open
      </a>
    )}
  </Row>
);

}

/// <reference types="dom-mediacapture-record" />
import { ReactElement } from "react";
export declare type ReactMediaRecorderRenderProps = {
    error: string;
    muteAudio: () => void;
    unMuteAudio: () => void;
    startRecording: () => void;
    pauseRecording: () => void;
    resumeRecording: () => void;
    stopRecording: () => void;
    mediaBlobUrl: null | string;
    status: StatusMessages;
    isAudioMuted: boolean;
    previewStream: MediaStream | null;
    clearBlobUrl: () => void;
};
export declare type ReactMediaRecorderHookProps = {
    audio?: boolean | MediaTrackConstraints;
    video?: boolean | MediaTrackConstraints;
    screen?: boolean;
    onStop?: (blobUrl: string, blob: Blob) => void;
    blobPropertyBag?: BlobPropertyBag;
    mediaRecorderOptions?: MediaRecorderOptions | null;
};
export declare type ReactMediaRecorderProps = ReactMediaRecorderHookProps & {
    render: (props: ReactMediaRecorderRenderProps) => ReactElement;
};
export declare type StatusMessages = "media_aborted" | "permission_denied" | "no_specified_media_found" | "media_in_use" | "invalid_media_constraints" | "no_constraints" | "recorder_error" | "idle" | "acquiring_media" | "delayed_start" | "recording" | "stopping" | "stopped";
export declare enum RecorderErrors {
    AbortError = "media_aborted",
    NotAllowedError = "permission_denied",
    NotFoundError = "no_specified_media_found",
    NotReadableError = "media_in_use",
    OverconstrainedError = "invalid_media_constraints",
    TypeError = "no_constraints",
    NONE = "",
    NO_RECORDER = "recorder_error"
}
export declare function useReactMediaRecorder({ audio, video, onStop, blobPropertyBag, screen, mediaRecorderOptions, }: ReactMediaRecorderHookProps): ReactMediaRecorderRenderProps;
export declare const ReactMediaRecorder: (props: ReactMediaRecorderProps) => ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;

startRecording, stopRecording ={ myOtherFunction }, 作为控件的参数,而不是 startRecording, stopRecording, 但myOtherFunction从未被调用。

我添加了一个与param函数同名的函数 stopRecording(){};

1 回复 | 直到 3 年前

mahi-man 3 年前

看起来像 startRecording stopRecording 是您需要调用以启动/停止录制的函数,但您将它们解释为回调。如果我正确理解了您的需求,您应该在控件内调用它们,例如(未测试),这样您也可以在录制开始/停止时运行任何其他代码:

function Controls({ status, startRecording, stopRecording, mediaBlobUrl }) {
  const [copied, setCopied] = useState(false);
  const [url, setURL] = useState('');
  storage.ref(path).getDownloadURL().then(setURL);
  const handleStart = () => {
    startRecording()
    // Do stuff here the needs to be run when recording starts
  }
  const handleStop = () => {
    stopRecording()
    // Do stuff here the needs to be run when recording stops
  }
  return (
    <Row>
      <button className='uk-margin-small-left' type='button' onClick={handleStart} disabled={status === 'recording'}>
        Start
      </button>
      <button className='uk-margin-small-left' type='button' onClick={handleStop} disabled={status === 'stopped'}>
        Stop
      </button>
      // more stuff
    </Row>
  )
}