ReactのRefを使用してアップロードコンポーネントを作成する

この章では、Reactで参照を使用する方法を説明します。この章の終わりまでに、効果的で使いやすい方法で既存のアプリケーションでRefを使用できるようになります。

Reactでは、Refを使用して、DOMに直接アクセス、操作、および対話します。HTML要素への直接参照により、クライアント側アプリケーションの作成時に一般的に発生するタスクを実行できます。これらのタスクには、データ操作とレイアウト分析が含まれますが、これらに限定されません。

Refを使用して、プレーンCSSを使用してスタイルを設定できなかったスタイル付き入力ボタンを作成します。最初にファイル入力を作成し、次にカスタムボタンコンポーネントを追加します。ボタンをクリックすると、入力のファイルアップロード機能がトリガーされます。

1. create-react-appCLIを使用して新しいプロジェクトを作成します。

$ npx create-react-app button-refs

cd button-refs && npm start

const App = () => {
  return (
    <input />
  );
}
export default App;

const App = () => {
  return (
    <input type="file" />
  );
}
export default App;

5.buttonオレンジ色の背景と白いフォントの色のスタイルを持つコンポーネントを追加します。ネイティブ入力ファイルを非表示にするには、hidden属性を追加します。

const App = () => {
  return (
    <>
      <input type="file" hidden={true} />
      <button style={{ backgroundColor: "orange", color: "white" }}>
        Upload
      </button>
    </>
  );
}
export default App;

const App = () => {
  inputRef;
  return (
    <>
      <input type="file" hidden={true} />
      <button style={{ backgroundColor: "orange", color: "white" }}>
        Upload
      </button>
    </>
  );
}
export default App;

const App = () => {
  let inputRef;
  return (
    <>
      <input
        type="file"
        hidden={true}
        ref={refParam => inputRef = refParam}
      />
      <button style={{ backgroundColor: "orange", color: "white" }}>
        Upload
      </button>
    </>
  );
}
export default App;

const App = () => {
  let inputRef;
  return (
    <>
      <input
        type="file"
        hidden={true}
        ref={refParam => inputRef = refParam}
      />
      <button
        style={{ backgroundColor: "orange", color: "white" }}
        onClick={() => inputRef.click()}
      >
        Upload
      </button>
    </>
  );
}
export default App;

ここで、ボタンをクリックすると、ファイルのアップロードを求めるプロンプトが表示されます。これは、カスタムボタンがファイル入力のネイティブ機能をトリガーするためです。

React Refを使用して、ほとんどカスタマイズできないネイティブ入力の機能を、必要に応じてスタイルを設定できるボタンコンポーネントにバインドしました。特に、refオブジェクトとして入力コンポーネントに渡された関数を検査します。

リポジトリのURL： https://github.com/easywebsify/button-refs