اذهب إلى المحتوى
  • 0

تمرير البيانات من php لreact

عبد الرؤوف حشايشي

السؤال

السلام عليكم.

أنا أحاول تطوير تطبيق باستخدام إطار العمل laravel و المكتبة reactJs.

في ملفات blade أضيف فقط الcontainer و باقي المحتوى باستخدام مكونات react.

مثال: أنا الان أريد إنشاء صفحة الprofile.

أنشأت ملف profile.blade.php و مسار خاص في web.php 

في ملف الprofile لدي فقط عنصر html

  • <div id="profile"></div>
    و الباقي في مكون ReactJs : Profile.jsx
  • import React from 'react'
    import ReactDOM from 'react-dom/client'
    
    const Profile = ()=> (
    	<form action="/home" method="POST">
          @csrf
          <input type="text" value="" />
          <button type="submit">save</button>
    	</form>
    )
    
    export default Profile;
    
    if (document.getElementById('profile')){
    	const Index = ReactDOM.createRoot(document.getElementById('profile'))
    	Index.render(<Profile />)
    }

و قمت باستيراده في app.js.

 

المشكلة هي أنني أريد وضع قيمة اسم المستخدم في قيمة المدخل والتي هي في laravel = auth()->user()->name

ولكن بالطريقة التالية لا يصلح:

<input type="text" value="{{auth()->user()->name}}"

ولكن هذا لا يعمل فما هو الحل؟

هذا كل شيء و شكرا.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

حاول حقن قيمة auth()->user()->name في متغير عام او في وسم ثم قم عن طريق React بقراءته واسناده للحقل المعني، 

<div id="user-name">{{ auth()->user()->name }}</div>
<div id="profile"></div>
let userName = document.querySelector('#user-name').textContent

const Profile = ()=> (
	<form action="/home" method="POST">
      @csrf
      <input type="text" value="{userName}" />
      <button type="submit">save</button>
	</form>
)

نفس الشيء بالنسبة لحقل csrf، لن يعمل. حاول مقاربة نفس الطريقة في انشاء الحقل csrf.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 38 دقائق مضت قال Adnane Kadri:

حاول حقن قيمة auth()->user()->name في متغير عام او في وسم ثم قم عن طريق React بقراءته واسناده للحقل المعني، 

<div id="user-name">{{ auth()->user()->name }}</div>
<div id="profile"></div>
let userName = document.querySelector('#user-name').textContent

const Profile = ()=> (
	<form action="/home" method="POST">
      @csrf
      <input type="text" value="{userName}" />
      <button type="submit">save</button>
	</form>
)

نفس الشيء بالنسبة لحقل csrf، لن يعمل. حاول مقاربة نفس الطريقة في انشاء الحقل csrf.

مشكـور أخي،

ولكن هذا سيظهر عنصر الhtml في الصفحة،

هل كل ما أقوم به هو إخفاءه عن طريق display:none;؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال عبد الرؤوف رؤوف:

مشكـور أخي،

ولكن هذا سيظهر عنصر الhtml في الصفحة،

هل كل ما أقوم به هو إخفاءه عن طريق display:none;؟

نعم بالتأكيد، 

او قم باتخاذ المنحى الثاني، وهو حقن قيمة name في متغير جافاسكربت عام.

او كفكرة عملية اخرى، قم بحقن القيمة في وسم meta داخل عنصر head بدل وسم عادي. فهاته البيانات في الأخير هي بيانات وصفية.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...