[英](React-Select hooks) state not changing when React-Select onChange prop handling
[英]React-select clears the value (state) of the other input fields when select option is changed (onChange)
我在表單上為我的 select 使用了 React-select,當我單擊 select 並且 select 的值輸入字段被更改時,當前狀態/值僅被清除
const [values, setValues] = useState({
username: "",
email: "",
time: "",
});
const handleChange = (event) => {
setValues({
...values,
[event.target.id]: event.target.value,
});
console.log(`Option entered:`, values);
};
const optionsTime = [
{
value: "15",
label: "15 mins",
},
{
value: "30",
label: "30 mins",
},
{
value: "45",
label: "45 mins",
},
{
value: "60",
label: "60 mins",
},
{
value: "75",
label: "75 mins",
},
];
const handleSubmit = (e) => {
e.preventDefault();
console.log(`Option submited:`, values);
alert("You are submitting " + values);
};
const handleTime = (e) => {
//I used created a different onChange function for react-select and used e.value because react select //throws error of undefined id or value when e.target.value is used...
if (values.time !== e.value) {
setValues({ time: e.value });
}
console.log(`Option selected:`, e, values);
};
return (
<div className="headerRow">
<Navbar />
<div className="col-lg-4 schedule-area d-none d-lg-block">
<form id="schedule" onSubmit={handleSubmit}>
<h3>Schedule A Brief</h3>
<div className="form-group">
<input
id="username"
type="text"
placeholder="Contact Person"
className="form-control"
onChange={handleChange}
value={values.username}
required
/>
</div>
<div className="form-group">
<input
id="email"
type="email"
placeholder="Email Address"
className="form-control"
onChange={handleChange}
value={values.email}
required
/>
</div>
<div className="form-group">
<Select
id="time"
type="options"
placeholder="Select Brief Time Projection"
onChange={handleTime}
options={optionsTime}
valueInput={values.time}
isSearchable
required
/>
</div>
<div onClick={handleSubmit} className="book_btn text-center">
Schedule a Brief
</div>
</form>
</div>
</div>
);
請問我該怎么做才能獲取所有輸入字段的值,包括 select 字段 onSubmit
目前,您只返回時間覆蓋值state 中的其他舊值
代替
const handleTime = (e) => {
if (values.time !== e.value) {
setValues({ time: e.value });
}
至
const handleTime = (e) => {
if (values.time !== e.value) {
setValues((old)=>({...old, time: e.value })); }
我變了
const handleTime = (e) => {
if (values.time !== e.value) {
setValues({ time: e.value });
}
至:
const handleTime = (e) => {
if (values.time !== e.value) {
setValues({
...values,
time: e.value
});
}
現在更新了...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.