안녕하세요 세계!

valueReact에서 양식 작업을 할 때 속성이 설정된 경우 입력 필드/텍스트 상자에 입력할 수 없는 문제가 발생할 수 있습니다 . 실제 문제가 무엇이며 어떻게 해결했는지 보여줄 것입니다.

대본

요구 사항

API 본문에 전달해야 하는 이메일, 이름 및 메시지라는 세 개의 필드가 필요한 API가 있습니다. UI에서는 입력 필드 또는 텍스트 영역에서 해당 값을 가져오고 버튼을 사용하여 API 호출을 트리거합니다.

API에서 예상되는 구조는 다음과 같습니다.

{
"email": "[email protected]",
"name": "Test",
"message": "Hi, this is a test message."
}

nameReact 앱에서 및 를 얻기 위한 2개의 입력 필드 email, 를 얻기 위한 텍스트 영역 message및 API 호출을 트리거하고 3개의 값을 보내는 버튼이 있는 구성 요소를 만들었습니다 . 구성품은 이렇게 생겼습니다.

import { useState } from "react";
import callApi from "../axios/axios";
import "./contact.scss";
const Contact = () => {
  const payloadInitial = {
    sender: "",
    email: "",
    message: "",
  };
  const initialClass = "form-input";
  const [payload, setPayload] = useState(payloadInitial);
  // Captures Sender name
  const setName = (name) => {
    const temp = payload
    temp.sender = name
    setPayload(temp)
  };
  // Captures Email
  const setEmail = (email) => {
    const temp = payload
    temp.email = email
    setPayload(temp)
  };
  // Captures Message
  const setMessage = (message) => {
    const temp = payload
    temp.message = message
    setPayload(temp)
    checkCanSend();
  };
  // Triggers API call on button click
  const sendMessage = (evt) => {
    evt.preventDefault();
    callApi
      .post("/email", payload)
      .then((res) => {
        console.log("Response: ", res)
      })
      .catch((err) => {
        console.error("Something went wrong: ", err)
      });
  };
  return (
    <div className="form-container">
      <h2 className="form-title">Write to me</h2>
      <div className="form-container">
        <!--Input to get sender name-->
        <label>Your Name</label>
        <input
          type={"text"}
          aria-label="Your Name"
          value={payload.sender}
          onChange={(e) => setName(e.target.value)}
        ></input>
        <!--Input to get sender email-->
        <label>Your Email</label>
        <input
          type={"email"}
          aria-label="Your Email"
          value={payload.email}
          onChange={(e) => setEmail(e.target.value)}
        ></input>
        <!--Textbox to get the message-->
        <label>Type in your message</label>
        <textarea
          rows={8}
          value={payload.message}
          onChange={(e) => setMessage(e.target.value)}
        ></textarea>
        <!--Button to trigger API call-->
        <button onClick={(e) => sendMessage(e)} className="send-button">
          Send Message
        </button>
      </div>
    </div>
  );
};

export default Contact;

문제

위의 코드는 하나 이상의 문자를 입력할 수 없는 문제를 일으켰습니다.

해결책

이 문제에 대한 해결책은 다음과 같습니다. onClick 함수에서 임시 변수에 상태를 저장하고 임시 값을 변경하고 임시를 상태로 설정하는 대신 상태를 직접 업데이트해야 합니다 .

우리의 경우 기능을 고려해 봅시다 setName. 함수는 다음과 같이 변경되어야 합니다.

const setName = (name) => {
    setPayload((prev) => ({
      ...prev,
      sender: name,
    }));
    checkCanSend();
  }

이제 입력 필드에 입력할 수 있습니다.

최종 코드는 다음과 같습니다.

import { useState } from "react";
import callApi from "../axios/axios";
import "./contact.scss";
const Contact = () => {
  const initialClass = "form-input";
  const [payload, setPayload] = useState(payloadInitial);
  // Captures Sender name
  const setName = (name) => {
    setPayload((prev) => ({
      ...prev,
      sender: name,
    }));
    checkCanSend();
  };
  // Captures Email
  const setEmail = (email) => {
    setPayload((prev) => ({
      ...prev,
      email,
    }));
    checkCanSend();
  };
  // Captures Message
  const setMessage = (message) => {
    setPayload((prev) => ({
      ...prev,
      message,
    }));
    checkCanSend();
  };
  // Triggers API call on button click
  const sendMessage = (evt) => {
    evt.preventDefault();
    callApi
      .post("/email", payload)
      .then((res) => {
        console.log("Response: ", res)
      })
      .catch((err) => {
        console.error("Something went wrong: ", err)
      });
  };
  return (
    <div className="form-container">
      <h2 className="form-title">Write to me</h2>
      <div className="form-container">
        <!--Input to get sender name-->
        <label>Your Name</label>
        <input
          type={"text"}
          aria-label="Your Name"
          value={payload.sender}
          onChange={(e) => setName(e.target.value)}
        ></input>
        <!--Input to get sender email-->
        <label>Your Email</label>
        <input
          type={"email"}
          aria-label="Your Email"
          value={payload.email}
          onChange={(e) => setEmail(e.target.value)}
        ></input>
        <!--Textbox to get the message-->
        <label>Type in your message</label>
        <textarea
          rows={8}
          value={payload.message}
          onChange={(e) => setMessage(e.target.value)}
        ></textarea>
        <!--Button to trigger API call-->
        <button onSubmit={(e) => sendMessage(e)} className="send-button">
          Send Message
        </button>
      </div>
    </div>
  );
};

export default Contact;

원래 https://sriram23.hashnode.dev 에 게시되었습니다 .