react-select不顯示默認值且不更新-有解無憂

我想做一個帶有選擇的表單。我使用鉤子，為此我使用 react-select。

我的問題：欄位選擇不顯示默認值。當我選擇值時，該欄位不顯示。當我點擊提交按鈕時，沒有發送任何值。

我不明白為什么，有人可以幫我嗎？

這是我的代碼：

import React, { useState } from "react";
import emailjs from "emailjs-com";
import styles from "../../styles/ContactForm.module.scss";
import Select from 'react-select'

function Field({ name, value, onChange, children }) {
  return (
    <div className="form-group mb-2">
      <label htmlFor={name}>{children}</label>
      <input
        type="text"
        value={value}
        onChange={onChange}
        id={name}
        name={name}
        className="form-control"
      />
    </div>
  );
}
function FieldRequired({ name, value, onChange, children }) {
  return (
    <div className="form-group mb-2">
      <label htmlFor={name}>{children}</label>
      <input
        type="text"
        value={value}
        onChange={onChange}
        required
        id={name}
        name={name}
        className="form-control"
      />
    </div>
  );
}
function FieldTel({ name, value, onChange, children }) {
  return (
    <div className="form-group mb-2">
      <label htmlFor={name}>{children}</label>
      <input
        type="tel"
        pattern="^(?:(?:\ |00)33[\s.-]{0,3}(?:\(0\)[\s.-]{0,3})?|0)[1-9](?:(?:[\s.-]?\d{2}){4}|\d{2}(?:[\s.-]?\d{3}){2})$"
        value={value}
        onChange={onChange}
        id={name}
        name={name}
        className="form-control"
      />
      <small className="form-text text-muted">
        Votre téléphone servira uniquement a vous contacter pour votre demande.
      </small>
    </div>
  );
}
function CheckBox({ name, value, onChange, children }) {
  return (
    <div className="form-check mb-2">
      <input
        type="checkbox"
        checked={value}
        onChange={onChange}
        id={name}
        name={name}
        required
        className="form-check-input"
      />
      <label htmlFor={name} className="form-check-label">
        {children}
      </label>
    </div>
  );
}
function EmailBox({ name, value, onChange, children }) {
  return (
    <div className="form-group mb-2">
      <label htmlFor={name}>{children}</label>
      <input
        type="email"
        pattern="^[a-zA-Z0-9.!#$%&'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:\.[a-zA-Z0-9-] )*$"
        value={value}
        onChange={onChange}
        required
        id={name}
        name={name}
        className="form-control"
      />
      <small className="form-text text-muted">
        Votre email servira uniquement a vous contacter pour votre demande.
      </small>
    </div>
  );
}
function TextArea({ name, value, onChange, children }) {
  return (
    <div className="form-group mb-2">
      <label htmlFor={name}>{children}</label>
      <textarea
        rows="3"
        maxLength="2000"
        value={value}
        onChange={onChange}
        id={name}
        name={name}
        className="form-control"
      />
    </div>
  );
}

let options = [
  {value: "vitrine-cms", label: "Site vitrine CMS"},
  {value: "vitrine-main", label: "Site vitrine sur-mesure"},
  {value: "eCommerce", label: "Site eCommerce"},
  {value: "autre-site", label: "Autre site"},
  {value: "ponctuel", label: "Mission ponctuelle"},
  {value: "maintenance", label: "Maintenance"},
  {value: "autre", label: "Autre choix"},
]

function SelectFieldRequired(name, value, onChange) {
  return( 
    <>
      <div>Nature de la demande</div>
      <Select
            name={name}
            value={value}
            defaultValue={options[1]}
            onChange={onChange}
            options={options}
      />    
    </>
  )
}

export default function ContactForm() {
  const [form, setForm] = useState({
    lastName: "",
    to_name: "service_.....",
    firstName: "",
    company: "",
    phone: "",
    email: "",
    natureOfTheRequest: options[1],
    message: "",
    acceptCGU: false,
  });
  const sendEmail = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        "service_....",
        "template_.....",
        e.target,
        "user_......"
      )

      .then(
        (result) => {
          console.log(result);
          alert("Email bien envoyé!!!");
        },
        (error) => {
          console.log(error);
        }
      );
      
    e.target.reset();
  };
  const onChange = (value) => {
    setForm((prevForm) => ({
        ...prevForm,
        natureOfTheRequest: value
    }));
};


  return (
    <div className="container">
      <form onSubmit={sendEmail}>
        {/* ............................................................................................ */}
        <FieldRequired name="lastName" value={form.lastName} onChange={setForm}>
          Nom *
        </FieldRequired>
        {/* ............................................................................................ */}
        <Field name="firstName" value={form.firstName} onChange={setForm}>
          Prénom
        </Field>
        {/* ............................................................................................ */}
        <Field name="company" value={form.company} onChange={setForm}>
          Société
        </Field>
        {/* ............................................................................................ */}
        <FieldTel name="phone" value={form.phone} onChange={setForm}>
          Téléphone
        </FieldTel>
        {/* ............................................................................................ */}
        <EmailBox name="email" value={form.email} onChange={setForm}>
          Email *
        </EmailBox>
        {/* ............................................................................................ */}
         <SelectFieldRequired 
          className="request col-12" 
          name="natureOfTheRequest" 
          value={form.natureOfTheRequest} 
          onChange={onChange}
          id="natureOfTheRequest" 
        />
{/*         <div className="form-group  mb-2">
          <label className="request col-12" htmlFor="request">
            Nature de la demande *
          </label>
          <select
            id="natureOfTheRequest"
            name="natureOfTheRequest"
            onChange={setForm}
            value={form.natureOfTheRequest}
            required
            className="py-1 rounded-3"
          >
            <option value="">Sélectionnez</option>
            <option value="vitrine-cms">Site vitrine Wordpress</option>
            <option value="vitrine-main">Site vitrine sur-mesure</option>
            <option value="eCommerce">Site E-Commerce CMS</option>
            <option value="autre-site">Autre site sur-mesure</option>
            <option value="ponctuel">Travail ponctuel</option>
            <option value="maintenance">Maintenance</option>
            <option value="autre">Autre sujet</option>
          </select>
        </div>
 */}        {/* ............................................................................................ */}
        <TextArea name="message" value={form.message} onChange={setForm}>
          Explication sur votre demande
        </TextArea>
        {/* ............................................................................................ */}
        {/* ............................................................................................ */}
        <CheckBox name="acceptCGU" value={form.acceptCGU} onChange={setForm}>
          J&apos;accepte que mes données soient utilisées pour me contacter *
        </CheckBox>
        {/* ............................................................................................ */}
        {/* SUBMIT button */}
        <button
          type="submit"
          id={styles.submitButton}
          className="btn btn-primary"
        >
          {" "}
          Envoyer le formulaire
        </button>
      </form>
    </div>
  );
}

uj5u.com熱心網友回復：

您將Select值設定為form.natureOfTheRequest，因此您需要在其onChange回呼中更新該特定欄位，而不是簡單地傳遞setForm.

回呼可能如下所示。

const onChange = (value) => {
    setForm((prevForm) => ({
      ...prevForm,
      natureOfTheRequest: value
    }));
};

然后，修改SelectFieldRequired的onChange道具以接收它。

<SelectFieldRequired 
    className="request col-12" 
    name="natureOfTheRequest" 
    value={form.natureOfTheRequest} 
    onChange={onChange}
    id="natureOfTheRequest" 
/>

由于您在上明確設定了值Select，因此也會覆寫defaultValue您設定的。相反，您可以將form.natureOfTheRequest初始值設定為options[1]。

const [form, setForm] = useState({
    lastName: "",
    to_name: "service_........",
    firstName: "",
    company: "",
    phone: "",
    email: "",
    natureOfTheRequest: options[1],
    message: "",
    acceptCGU: false,
});

您還需要更改SelectFieldRequired組件簽名，因為道具必須從props物件中解構。

function SelectFieldRequired({ name, value, onChange }) {
    //...
}

完整代碼示例：

let options = [
    {value: "vitrine-cms", label: "Site vitrine CMS"},
    {value: "vitrine-main", label: "Site vitrine sur-mesure"},
    {value: "eCommerce", label: "Site eCommerce"},
    {value: "autre-site", label: "Autre site"},
    {value: "ponctuel", label: "Mission ponctuelle"},
    {value: "maintenance", label: "Maintenance"},
    {value: "autre", label: "Autre choix"},
]

// Change props to an object with fields here
function SelectFieldRequired({ name, value, onChange }) {  
    return( 
      <>
         <div>Nature de la demande *</div>
         <Select
             name={name}
             value={value}
             defaultValue={options[1]}
             onChange={onChange}
             required
             options={options}
         />    
       </>
    )
}

export default function ContactForm() {
    const [form, setForm] = useState({
        lastName: "",
        to_name: "service_........",
        firstName: "",
        company: "",
        phone: "",
        email: "",
        natureOfTheRequest: options[1],
        message: "",
        acceptCGU: false,
    });

    const sendEmail = (e) => {
        // Omitted for simplicity
    };

    const onChange = (value) => {
        setForm((prevForm) => ({
            ...prevForm,
            natureOfTheRequest: value
        }));
    };

    return (
      <div className="container">
          <form onSubmit={sendEmail}>
              <SelectFieldRequired 
                  className="request col-12" 
                  name="natureOfTheRequest" 
                  value={form.natureOfTheRequest} 
                  onChange={onChange}
                  id="natureOfTheRequest" 
              />
              {/* SUBMIT button */}
              <button
                  type="submit"
                  id={styles.submitButton}
                  className="btn btn-primary"
              >
                  {" "}
                  Envoyer le formulaire
              </button>
          </form>
      </div>
    );
}

Codesandbox 中的最小作業示例：https ://codesandbox.io/s/bold-oskar-d1in0

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/392865.html

標籤：反应形式反应钩子下一个.js 反应选择

上一篇：Bootstrap多選-從第一個多選中過濾第二個多選

下一篇：如何將布爾資料發布到Flask路由