[英]react-select don't show and no value
I would like to do a form with select.我想用 select 做一个表格。 I use hooks and I use react-select for this.
我使用钩子并为此使用 react-select。
My problems: The fiel select don't show the default value.我的问题:字段 select 不显示默认值。 When I select value the field don't show it.
当我 select 值时,该字段不显示。 When I click on submit button, no value are send.
当我单击提交按钮时,没有发送任何值。
I don't understand why, someone could help me please?我不明白为什么,有人可以帮助我吗?
this is my code:这是我的代码:
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>
);
}
Thank you for your help.谢谢您的帮助。
You're setting the Select
value to form.natureOfTheRequest
, so you need to update that specific field on its onChange
callback, rather than simply passing setForm
.您将
Select
值设置为form.natureOfTheRequest
,因此您需要在其onChange
回调中更新该特定字段,而不是简单地传递setForm
。
The callback could look like the following.回调可能如下所示。
const onChange = (value) => {
setForm((prevForm) => ({
...prevForm,
natureOfTheRequest: value
}));
};
Then, modify the SelectFieldRequired
's onChange
prop to receive it.然后,修改
SelectFieldRequired
的onChange
属性以接收它。
<SelectFieldRequired
className="request col-12"
name="natureOfTheRequest"
value={form.natureOfTheRequest}
onChange={onChange}
id="natureOfTheRequest"
/>
Since you're explicitly setting the value on the Select
, that also overrides the defaultValue
you have set.由于您在
Select
上明确设置值,因此这也会覆盖您设置的defaultValue
。 Instead, you can set the form.natureOfTheRequest
initial value to options[1]
.相反,您可以将
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.