ReactアプリでCloudinaryアップロードウィジェットを使用しようとしていますが、問題があります。プロジェクトを実行すると、アップロードウィジェットがすぐに表示されますが、閉じて再度開くと、アプリがクラッシュし、次のメッセージが表示されます。
widget.open（）は関数ではありません
注：アップロードは正しく機能します
import React, { Component } from 'react';
import './App.css';
class App extends Component {
showWidget = (widget) => {
widget.open();
}
checkUploadResult = (resultEvent) => {
if(resultEvent.event === 'success'){
console.log(resultEvent)
}
}
render() {
let widget = window.cloudinary.openUploadWidget({
cloudName: "*********",
uploadPreset: "tryingfirsttime"},
(error, result) => {this.checkUploadResult(result)});
return (
<div className="App">
<button onClick={this.showWidget}> Upload file</button>
</div>
);
}
}
export default App;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script> まず、問題を理解しましょう。Cloudinaryアップロードウィジェットはコンポーネントのレンダリング関数で定義され、そのコンポーネントがレンダリングされると、の機能で定義されているため、アップロードウィジェットが開きopenUploadWidgetます。次に、ウィジェットはレンダリング関数のスコープ内でのみ定義されており、ウィジェットの外部からはアクセスできないため、エラーが発生しますwidget.open() is not a function。
これらの問題を解決するには、まずウィジェットをローカル変数または状態の一部として定義することから始めます。これは、コンポーネントの一部としてコンストラクターを含めることによって行われます。
constructor(props) {
super(props)
// Defined in state
this.state = { . . . }
// Defined as local variable
this.widget = myLocalVariable
}
使用するには、Cloudinaryアップロードウィジェットのインスタンスを作成する際に行うには次のものがありcreateUploadWidgetませんし、openUploadWidgetウィジェットを開くときの制御を可能にし、。
constructor(props) {
super(props)
// Defined in state
this.state = {
widget: cloudinary.createUploadWidget({
cloudName: 'my_cloud_name',
uploadPreset: 'my_preset'},
(error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
})
}
// Defined as local variable
this.widget = cloudinary.createUploadWidget({
cloudName: 'my_cloud_name',
uploadPreset: 'my_preset'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
})
}
最後に、showWidgetクリックイベントは、ウィジェットを引数として渡す必要がなく（コンポーネントでローカルに定義されているため）、thisキーワードで参照することもできます。現在のコンポーネントを参照するには、キーワードthisを含める必要があることに注意してください。
showWidget = () => {
this.widget.open();
}
最終結果を示すJSFiddleを含めました：https：//jsfiddle.net/danielmendoza/fve1kL53/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加