useReducer를 사용한 코드 참조 양식 입력

코드는 App.js에서 실행됩니다.

앱 구성 요소를 단축하기 위해 감속기 기능을 다른 곳에 작성할 수 있습니다.
코드가 잘 실행됩니다.

나는 종종 참조용으로 작성된 작업 코드가 부족하여 만들고 있습니다.

여러 입력을 처리하기 위해 반응 함수 구성 요소에서 useReducer 후크를 사용할 것입니다.

또한 라디오 버튼의 초기 값을 처리하는 방법에 대한 라디오 버튼의 논리를 찾으십시오.

import { useReducer } from "react";

export default function App() {
  const formReducer = (state, action) => {
    switch (action.type) {
      case "HandleInputText": {
        return {
          ...state,
          [action.field]: action.payload
        };
      }
      case "ToggleConsent": {
        return {
          ...state,
          hasConsented: !state.hasConsented
        };
      }
      default:
        return state;
    }
  };

  const initialState = {
    username: "",
    email: "",
    password: "",
    hasConsented: false,
    gender: "male"
  };

  const [formState, dispatch] = useReducer(formReducer, initialState);
  console.log(formState);
  // where dispatch is a method to trigger state updates/changes, reducer is a function we define which controls how we change the state, and initial state is an object with initial values defined, like the initialFormState example above.
  const handleChange = (e) => {
    dispatch({
      type: "HandleInputText",
      field: e.target.name,
      payload: e.target.value
    });
  };

  return (
    <div className="App">
      <h1> Reducer with form </h1>
      <label>User Name </label>
      <input
        type="text"
        name="username"
        value={formState.username}
        onChange={(e) => handleChange(e)}
      />{" "}
      <br />
      <label>Email </label>
      <input
        type="text"
        name="email"
        value={formState.email}
        onChange={(e) => handleChange(e)}
      />
      <br />
      <label>Password </label>
      <input
        type="text"
        name="password"
        value={formState.password}
        onChange={(e) => handleChange(e)}
      />
      <br />
      <label>Gender </label>
      <div onChange={(e) => handleChange(e)}>
        <input
          type="radio"
          value="Male"
          name="gender"
          checked={formState.gender === "male"}
        />{" "}
        Male
        <input
          type="radio"
          value="Female"
          name="gender"
          checked={formState.gender === "female"}
        />{" "}
        Female
        <input type="radio" value="Other" name="gender" /> Other
      </div>
      <br />
      <label> i hearby Govind declare this that the code runs in react App </label>
      <input
        type="checkbox"
        checked={formState.hasConsented}
        onChange={() => dispatch({ type: "ToggleConsent" })}
      />
      <button onClick={() => console.log("printing", formState)}>
        print on console
      </button>
    </div>
  );
}

여기서 작업 코드
https://codesandbox.io/s/usereducerwithform-ubrz4m?file=/src/App.js:0-2542

경고도 볼 수 있습니다. 해당 경고를 해결하도록 도와주세요.

코드는 자명하지만 여전히 이해하고 싶다면 나에게 말할 수 있습니다. 내 whatsapp 8823011424
저를 기부하고 싶으시면 8823011424@upi로 1루피 이하로 해주세요.

문안 인사
고빈드