چطور در React از کامپوننت فرزند به والد داده ارسال کنیم؟

1. ساختار کامپوننت والد
2. ساختار کامپوننت فرزند
3. نکات کلیدی

در ReactJS برای ارسال داده از یک کامپوننت فرزند به والد، می‌توانیم از یک تابع ارسال‌ شده به عنوان props استفاده کنیم. در اینجا نحوه انجام این کار با یک مثال عملی آورده شده است.

ساختار کامپوننت والد

در کامپوننت والد، یک تابع (handleLanguage) تعریف می‌شود که به عنوان props به کامپوننت فرزند ارسال می‌شود. این تابع مسئول به‌روزرسانی وضعیت (state) والد با داده‌هایی است که از کامپوننت فرزند دریافت می‌شود.

      class ParentComponent extends React.Component {
    state = { language: '' };

    handleLanguage = (langValue) => {
        this.setState({ language: langValue });
    }

    render() {
        return (
            <div className="col-sm-9">
                <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
            </div>
        );
    }
}

    

ساختار کامپوننت فرزند

در کامپوننت فرزند، رویداد (event) مربوط به انتخاب زبان (انتخاب از دراپ‌داون) را مدیریت می‌کنیم. در اینجا هنگام وقوع تغییر، ارزش انتخاب شده را به تابعی که از والد دریافت شده است، ارسال می‌کنیم.

      export class SelectLanguage extends React.Component {
    state = {
        selectedLanguage: '',
    };

    handleLangChange = (e) => {
        const lang = e.target.value; // فرض می‌کنیم زبان انتخاب شده از طریق target.value دریافت می‌شود
        this.props.onSelectLanguage(lang);
        this.setState({ selectedLanguage: lang }); // برای به‌روزرسانی وضعیت محلی
    }

    render() {
        var json = require("json!../languages.json");
        var jsonArray = json.languages;

        return (
            <div>
                <DropdownList 
                    data={jsonArray} 
                    valueField='lang' 
                    textField='lang'
                    onChange={this.handleLangChange} 
                />
            </div>
        );
    }
}

    

نکات کلیدی

• استفاده از مطمئن شوید که در DropdownList از valueField و textField به درستی استفاده می‌کنید. این کار به React کمک می‌کند تا مشخص کند که چه داده‌ای باید به عنوان مقدار و چه داده‌ای باید به عنوان متن نمایش داده شود.
• مدیریت وضعیت محلی: در کامپوننت فرزند، می‌توانید از وضعیت محلی برای ذخیره زبان انتخابی استفاده کنید تا آن را در UI نشان دهید.
• رفع خطای TypeError: خطای this.props.onSelectLanguage is not a function معمولاً به دلیل عدم ارسال صحیح props از والد به فرزند است. اطمینان حاصل کنید که تابع به درستی به کامپوننت فرزند منتقل شده است و خطای هجیابی نداشته باشد.

با رعایت این نکات و ساختار پیشنهادی، می‌توانید به راحتی داده‌ها را از کامپوننت فرزند به والد ارسال کنید.