次のフォームを使用します.js

今日はWebアプリケーションの別のよく使われている要素を見ています.
そして、正確には、次のフォームを使用する方法.js
我々は、次のようにこのデータを使用するフォームの送信をハイジャックする方法を学びたい.JSアプリケーション.

次のフォームを作成します.js
フォームを作成するには、基本的なHTMLフォームを活用できます.
開けましょうpages/contact.js ページと非常に基本的な1つのフィールドフォームを追加します.

<div className='max-w-xs my-2 overflow-hidden rounded shadow-lg'>
    <div className='px-6 py-4'>
      <div className='mb-2 text-xl font-bold'>Contact us</div>
      <form className='flex flex-col'>
        <label htmlFor='name' className='mb-2 italic'>Name</label>
        <input className='mb-4 border-b-2' id='name' name='name' type='text' autoComplete='name' required />
        <button type='submit' className='px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700'>Submit</button>
      </form>
    </div>
</div>

我々が我々のアプリケーションを走らせるならばnpm run dev , 次のフォームが表示されます.

しかし、我々が今このフォームを提出するならば、それはちょうど我々が欲しいものでないいくつかのパラメタで同じURLに掲示するでしょう.

次のフォームデータの取り扱い.js
フォームをハイジャックを開始するにはonSubmit フォーム要素のハンドラ

<form className='flex flex-col' onSubmit={submitContact}>

これはsubmitContact 関数はフォームを送信します.
先に行き、私たちの連絡先ページにこの機能を作成しましょう.

const submitContact = async (event) => {
    event.preventDefault();
    alert(`So your name is ${event.target.name.value}?`);
};

フォームのデフォルト動作を停止します.
これは次のようになります.

右、それは私たちはすでにフォームを停止して制御することができます優れたスタートです.

外部データの送信
しかし、それは戻って警告するのに便利ではない.このデータをどこかで使うことができます.
我々は、このデータを使用して、外部のAPIに誰か古い名前を自分の名前に基づいて見つけるために送信するには?

Yes, there is an API for that 😂

const submitContact = async (event) => {
    event.preventDefault();
    const name = event.target.name.value;
    const res = await fetch(`https://api.agify.io/?name=${name}`);
    const result = await res.json();
    alert(`Hi ${name} your age is most likely: ${result.age}`);
};

ご覧のように、このAPIにフェッチ要求を実行し、ユーザーが入力した名前を渡すことができます.
その後、我々は結果を待って、彼の予測年齢をユーザーに警告!
私がそうするならば、私はとてもクールです.
私の年齢はかなり残念です、しかし、ここであなたは行きます:


次を使う.js API
上の例では、外部APIに投稿しています.多くの場合、次のAPIを活用したい.
新しいAPIエンドポイントを作成しましょうcontact.js インpages/api .
このファイルの中で以下のハンドラ関数を作成します.

export default function handler(req, res) {
  const body = req.body;
  if (!body.name) {
    return res.status(500).json({ msg: 'Name was not found' });
  }

  res.status(200).json({ name: `${body.name} Lastname` });
}

この関数は、名前が与えられていない場合に500ステータスコードを返し、' name lastname 'を返信します.
本当に大きなユースケースではありませんが、試してみましょう.
変更するsubmitContact この内部APIに投稿する機能.

const submitContact = async (event) => {
    event.preventDefault();
    const name = event.target.name.value;
    const res = await fetch('/api/contact', {
      body: JSON.stringify({
        name: name,
      }),
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
    });
    const result = await res.json();
    alert(`Is this your full name: ${result.name}`);
};

さて、フォームを埋めることにしたなら、次の警告を得ます.

私は、次にどれくらい融通がきくかについて、非常におっぱいです.JSは、内部の対外部API使用です!
あなたは完全なコードを見つけることができますGitHub .

読んでいただきありがとうございます、接続しましょう!
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or