안녕,
이것은 내 두 번째로 작은 가능한 기사입니다.
실수에 대해 용서해 주시고 개선을 환영합니다.

우리는 기능적 구성 요소에서 useState 후크를 사용하여 단일 상태에 여러 값을 저장하는 방법을 배웁니다.
demo

1단계: useState 가져오기 및 초기값 설정

초기 값은 객체가 됩니다.

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단계: 두 개의 입력 상자 추가

입력 상자의 값은 data.fname data.lname이 될 것이며 자리 표시자와 함께 이름과 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 이벤트 추가

각 입력 상자에는 handleChange 화살표 기능을 대상으로 하는 onChange 이벤트가 있습니다.
const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};
데이터가 객체라는 것을 알고 있으므로 확산 연산자를 사용하여 data.fname 및 data.lname을 대체하고 { ...data, key:"new Value" }를 사용하여 fname 및 lname의 새 값을 재할당할 수 있습니다.

이러한 방식으로[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인치 노트북이 충분하지 않기 때문에 추가 모니터를 위해 돈을 절약하려고 노력하고 있습니다.

고맙습니다!!