こんにちは
これは私の2番目に小さい可能な記事です.
間違いを私に許してください、そして、改善は非常に歓迎されます.
USENTフックを機能コンポーネントに使用して、単一の状態で複数の値を格納する方法を学びます.
demo

Step 1 : USENTをインポートして初期値を設定する

初期値はオブジェクトになります.

import "./styles.css";
import { useState } from "react";

export default function App() {
  const initialvalues = {
    fname: "",
    lname: ""
  };
  const [data, setData] = useState(initialvalues);

  return (
    <div className="App">

    </div>
  );
}

ステップ2：2つの入力ボックスを追加する

入力ボックスの値はデータになります.fnameデータ.また、名前とidをプレースホルダとともに割り当てます.

import "./styles.css";
import { useState } from "react";

export default function App() {
  const initialvalues = {
    fname: "",
    lname: ""
  };
  const [data, setData] = useState(initialvalues);

  return (
    <div className="App">

      <input
        placeholder="enter name"
        value={data.fname}
        name="fname"
        id="fname"

      />
      <input
        placeholder="enter surname"
        value={data.lname}
        name="lname"
        id="lname"

      />

    </div>
  );
}

ステップ3 :各入力ボックスにOnChangeイベントを追加する

各入力ボックスにはOnChangeイベントがあります.const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};データはオブジェクトであるので、データを置き換えることができます.fnameとデータ.lnameを使用したスプレッド演算子とfnameとlnameの新しい値を{ ...data, key:"new Value" }を使って再署名する
このように、[e.target.name]: e.target.valueは前のキー値組を取り替える新しいキー値組を作ります.
また、値を印刷するボタンを追加するには、このボタンを使用してバックエンドに値を提出することができます.

import "./styles.css";
import { useState } from "react";

export default function App() {
  const initialvalues = {
    fname: "",
    lname: ""
  };
  const [data, setData] = useState(initialvalues);
  const display = () => console.log(data);

  const handleChange = (e) => {
    setData({ ...data, [e.target.name]: e.target.value });
  };
  return (
    <div className="App">
      <input
        placeholder="enter name"
        value={data.fname}
        name="fname"
        id="fname"
        onChange={handleChange}
      />
      <input
        placeholder="enter surname"
        value={data.lname}
        name="lname"
        id="lname"
        onChange={handleChange}
      />
       <button onClick={display}>click</button>
    </div>
  );
}

デモ->
demo
これが役に立つならば、あなたは寄付することができます8823011424@upiミー1ルピー.それは私がより多くを書くことを奨励し、私はもっと書きたいと思って、私は私の14インチラップトップは十分ではないとして余分なモニターのためのお金を節約しようとしていると信じています.
ありがとう!