リアクションJS画像アップローダ|背景画像を変更する

Question

私はバックグラウンド画像のアップデーター/アップローダーコンポーネントを作成しようとしています。

画像はデフォルトで設定されていますが、ユーザーが背景画像を更新したい場合は、状態を更新して画像を保存したいと思います。

これまでの研究では、アップロードダイアログボックスを有効にするために<input type="file" />要素を使用する必要があることが示唆されています。

入力要素を使用しない別の方法がありますか？ユーザーが<button>要素をクリックしてダイアログボックスを表示し、背景イメージを更新する場合。

export default class ChangeBackground extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      backgroundImage: '' 
     } 
    } 

    handleBackgroundChange() { 
     let backgroundImage = backgroundImage 
     this.setState({ 
      backgroundImage: backgroundImage 
     }); 
    } 

    render() { 
     return (
      <div className="change-bg-wrap"> 
       <input type="file" accept="image/*" /> 
       <button> 
        <i className="fa fa-picture-o" style={{fontSize: 20}}></i> 
       </button> 
      </div> 
     ) 
    } 
} 

Answer 1

display: "none"で入力要素を非表示にしてから、ボタンをクリックすると<input>がトリガーされるようにJavaScriptを実行します。

triggerInput =() => { 
     document.querySelector("input[type='file']").click(); 
    } 
    <input type="file" accept="image/*" /> 
    <button onClick={this.triggerInput}> 
     <i className="fa fa-picture-o" style={{fontSize: 20}}></i> 
    </button> 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

キャッシュquerySelector VARの値だけでなく

編集を参照してください：私はあなたが私はネイティブのJSを使用する理由である反応するイベントclick()をトリガーすることができるとは思わないが。私が間違っているなら、私を訂正してください。

Answer 2

私の回答を以前から変更しました。私は私のプロジェクトでうまくいくようにいくつかのビットを修正しました。以下のコードを参照してください。

class ChangeBackground extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      backgroundImage: 'START' 
     } 

     this.handleBackgroundChange = this.handleBackgroundChange.bind(this); 
    } 

    handleBackgroundChange(e) { 
     const reader = new FileReader(); 
     const file = e.target.files[0]; 

     this.setState({ 
      backgroundImage: file.name, 
     }); 
    } 

    render() { 
     return (
      <div className="change-bg-wrap"> 
       <input onChange={this.handleBackgroundChange} type="file" accept="image/*" /> 
       file: {this.state.backgroundImage} 
       <button> 
        <i className="fa fa-picture-o" style={{fontSize: 20}}></i> 
       </button> 
      </div> 
     ) 
    } 
} 

setStateにアクセスするためにコンストラクタの最後の行を追加しました。 handleBackgroundChangeでは、後で調べたいファイルリーダーを追加しました.e.targetを通じてファイルにアクセスできます。状態が変化するかどうかを調べるために、レンダリング関数に行を追加しました。

これは私のプロジェクトではうまくいきますが、それが自分のものではなく、私がそれを修正できるかどうかを教えてください。