سلام به اساتید خسته نباشید
من رو یک فرمی دارم کار میکنم که لیستی از دسته بندی غذاها رو میسازه
و اون رو تو یک صفحه مربوط به سفره نمایش میده
الان میخوام با این فرمی که دارم از کتابخانه react-select استفاده کنم و اینارو تغییر بدم که قابلیت جستجو و اضافه کردن چند آیتم رو داشته باشه
چند روشی که از یوتوب دیدم امتحانش کردم ولی موفق نشدم درستش کنم
ممنون میشم اگه بتونید راهنمایی کنید که مشکلمو حل کنم
import React, { useState, useEffect } from "react";
import { isAuthenticated } from "../auth";
import {
createFood,
getSandwiches,
getPizzas,
getSalads } from "./apiAdmin";
const AddFood = () => {
const [salads, setSalads] = useState([]);
const [pizzas, setPizzas] = useState([]);
const [values, setValues] = useState({
title: "",
description: "",
price: "",
sandwiches: [],
sandwich: "",
loading: false,
error: "",
createdFood: "",
redirectToProfile: false,
formData: ""
});
const { user, token } = isAuthenticated();
const {
title,
description,
price,
sandwiches,
sandwich,
loading,
error,
createdFood,
// redirectToProfile,
formData
} = values;
const init = () => {
getSandwiches().then(data => {
if (data.error) {
setValues({ ...values, error: data.error });
} else {
setValues({
...values,
sandwich: data,
formData: new FormData()
});
initPizza();
initSalad();
}
});
};
// load pizza and set form data
const initPizza = () => {
getPizzas().then(data => {
if (data.error) {
setValues({ error: data.error });
} else {
setPizzas(data);
}
});
};
// load foods and set form data
const initSalad = () => {
getSalads().then(data => {
if (data.error) {
setValues({ error: data.error });
} else {
setSalads(data);
}
})
};
useEffect(() => {
init();
}, []);
const handleChange = name => event => {
const value =
name === "photo" ? event.target.files[0] : event.target.value;
formData.set(name, value);
setValues({ ...values, [name]: value });
};
const clickSubmit = event => {
event.preventDefault();
setValues({ ...values, error: "", loading: true });
createFood(user._id, token, formData).then(data => {
if (data.error) {
setValues({ ...values, error: data.error });
} else {
setValues({
...values,
title: "",
description: "",
price: "",
loading: false,
createdFood: data.name
});
}
});
};
const newPostForm = () => (
<form
onSubmit={clickSubmit}
className="mb-3"
>
<div className="form-group">
<input
onChange={handleChange("title")}
type="text"
className="form-control"
value={title}
placeholder="نام غذا"
/>
<select
onChange={handleChange("sandwich")}
className="form-control"
>
<option>ساندویچ</option>
{sandwiches &&
sandwiches.map((s, i) => (
<option key={i} value={s._id}>
{s.name}
</option>
))}
</select>
<select
onChange={handleChange("pizza")}
className="form-control"
>
<option>پیتزا</option>
{pizzas &&
pizzas.map((p, i) => (
<option key={i} value={p._id}>
{p.name}
</option>
))}
</select>
<select
onChange={handleChange("salad")}
className="form-control"
>
<option>سالاد</option>
{salads &&
salads.map((s, i) => (
<option key={i} value={s._id}>
{s.name}
</option>
))}
</select>
<input
onChange={handleChange("price")}
type="number"
className="form-control"
placeholder="قیمت"
value={price}
/>
<div className="container mt-3">
<div className="row">
<textarea
onChange={handleChange("description")}
type="text"
rows="10"
className="form-control"
value={description}
/>
</div>
</div>
</div>
<div className="action_btn offset-lg-3">
<button className="btn btn-success mt-3">ثبت غذا</button>
</div>
</form>
);
return (
<div className="row">
<div
style={{
paddingTop: "40px",
paddingBottom: "40px",
width: "100%",
maxWidth: "900px",
margin: "0 auto",}}
className="col-md-8 offset-md-2"
>
{newPostForm()}
</div>
</div>
);
};
export default AddFood;
سلام خسته نباشید.
برای اینکه بتونید چند گزینه رو انتخاب کنید باید prop با این اسم رو به select مورد نظر اضافه کنید : isMulti
برای جستجو هم که خودش جستجو داره بین آیتم های خودش. اگر منظورتون جستجوی هست که همراه با درخواست به سرور باشه از قابلیت async select اش استفاده کنید.
خیلی ممنون از این که وقت گذاشتید❤️
جستجو باید تو سرور باشه چون آیتم ها از سرور خونده میشه
من در حال یادگیری هستم لطفا اگه امکانش هست یک مثال رو همین کد بدید تا بتونم بهتر درک کنم...
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟