React Hooks を使用して入力値を取得する

やあ!今日は、反応フックの強力な基礎を得るために、簡単な方法で反応フックを使用する方法を学びます.

最初に設定する必要があるのは、もちろん documentation を参照できる反応 JS 環境です.すべての準備が整ったら、準備完了です.

最初の一歩

プロジェクト ファイルを開き、次に App.js ファイルを開きます.そこで、後で使用できるように、react とフックの useState をインポートすることから始めます.これがその外観です.

import React, { useState } from 'react'

次は App という関数を作成します.ここでは関数コンポーネントを使用しているため、反応フックを使用するため整列されています.

function App(){

}
export default App;

エラーが発生しないように、コードの最後にインポートすることを忘れないでください.

第二段階

function App(){
const [name, setName] = useState('')
const [password, setPassword] = useState('')
}

そこで、名前 setName を定義します. Name は、その値を表示するために使用できる変数です.一方、setName は、name の値を変更するために使用できるセッター メソッドです. useState は Name の初期値を定義するためのもので、空の文字列、空の配列、ブール値などにすることができます.反応フックのより良い説明を得るには、それらの docs を参照できます.

サードステップ

画面に何かが表示されるように、App コンポーネント内で return を提供する必要があります.

function App() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div>
      <input placeholder="username" onChange={e => setName(e.target.value)} />
      <input
        placeholder="password"
        onChange={e => setPassword(e.target.value)}
      />
      <button onClick={() => handleInput()}>Input</button>
      {name ? <p>Welcome {name}!</p> : ''}
    </div>
  );
}

ひどく見えますか?はい.落ち着いて、説明します.

まず、他のすべての要素をラップする div タグを作成します.そこで、div タグにスタイルを追加しました.

次に、2 つの入力タグ、プレースホルダーを含むボタンを定義します

次に、input タグ内で onChange props を定義します. onChange props 内で、e パラメーターを持つ無名関数を定義するため、input タグ内の値にアクセスできます. (匿名関数は矢印関数を使用しています.まだ慣れていない場合は、W3School で確認できます.)

そして無名関数内で先ほど説明したsetterメソッドを呼び出し、さらにsetterメソッド内でe引数を渡すので、inputタグ内の値が変化するたびにname、passwordの値が変化します.

const handleInput =  () =>{
    console.log(name, password)
  }

また、console.log に handleInput メソッドを使用してボタンを追加し、すべてが機能していることを確認します.

ボタンの下に、name 変数が何かで満たされている場合にテキストを表示するために、三項演算子を追加しました.

これまでに書いたコード全体の外観は次のとおりです.

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  const handleInput =  () =>{
    console.log(name, password)
  }

  return (
    <div>
      <input placeholder="username" onChange={e => setName(e.target.value)} />
      <input
        placeholder="password"
        onChange={e => setPassword(e.target.value)}
      />
      <button onClick={() => handleInput()}>Input</button>
      {name ? <p>Welcome {name}!</p> : ''}
    </div>
  );
}
export default App

締めくくり!これらの 3 つの簡単なステップは、単純な方法でフックを使用するのに十分であり、react フックについての基本的な理解を深めるために十分です.ここまで読んでくれてありがとうございます✨