توضیحات

در این جلسه به دریافت اطلاعات از select box از دوره آموزش ری اکت (React.js) پروژه محور میپردازیم.


javascript جاوااسکریپت react ری اکت

مدرس دوره علی شیخ
مدت دوره 16:08:35
تعداد ویدیو 106

وضعیت دوره : کامل شده
قیمت دوره : 249,000 تومان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام
    یک آبجکت دارم با یک کامپوننت

    
    

    export const units = [
    {
    id: 1,
    name: 'Meter',
    factor: 1,
    },
    {
    id: 2,
    name: 'Centimeter',
    factor: 0.01,
    },
    {
    id: 3,
    name: 'Millimeter',
    factor: 0.001,
    },
    {
    id: 4,
    name: 'Kilometer',
    factor: 1000,
    },
    ]


    کد های کامپوننت
    
    
    import {units} from "./units";
    function Select() {
    const onChange = (e) => {
    console.log(e.target.value)
    }
    return (
    <div>
    <div>
    <select onChange={onChange}>
    {units.map((option) => (
    <option value={option.name} key={option.id}>
    {option.name}
    </option>
    ))}
    </select>
    </div>
    </div>
    )
    }

    export default Select



    مشکلم اینه وقتی برنامه برای اولین بار اجرا میشه اولین آبشن که نماش داده میشه متر هستش حالا اگر کاربر بخواد همون متر رو انتخاب کنه تغییری رخ نمیده تا تابع onChange اجرا بشه باید این رو چه جوری هندل کنم

    • سلام وقت بخیر.
      ببینید در عمل شما یک متغیر دارید که مقدار value را داخلش قرار میدید، که حالا جلوتر درمورد useState صحبت میشه که، برای ایجاد متغیر میتونید ازش استفاده کنید و خب این متغیر را میتونید براش مقدار اولیه تعریف کنید که مقداری از value های option را قرار میدهید و از طرفی value مربوط به select را برابر اون مقدار قرار میدهید و عملا با اینکار مقدار اون متغیر در ابتدای کار در select انتخاب شده هست و از طرفی با تغییر select که onChange راصدا میزنه، مقدار جدید ارسال میشه و متغیر را مقدار دهی میکنیم.