[英]react-select don't show and no value
我想用 select 做一个表格。 我使用钩子并为此使用 react-select。
我的问题:字段 select 不显示默认值。 当我 select 值时,该字段不显示。 当我单击提交按钮时,没有发送任何值。
我不明白为什么,有人可以帮助我吗?
这是我的代码:
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"},
]
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: null,
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();
};
return (
<div className="container">
<form onSubmit={sendEmail}>
}
<SelectFieldRequired
className="request col-12"
name="natureOfTheRequest"
value={form.natureOfTheRequest}
onChange={setForm}
id="natureOfTheRequest"
/>
{/* SUBMIT button */}
<button
type="submit"
id={styles.submitButton}
className="btn btn-primary"
>
{" "}
Envoyer le formulaire
</button>
</form>
</div>
);
}
谢谢您的帮助。
您将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,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.