التعامل مع النماذج في React

كيفية التعامل مع النماذج في تطبيق React

النماذج هي أحد عناصر HTML القليلة التفاعلية بشكل افتراضي.

تم تصميمها للسماح للمستخدم بالتفاعل مع الصفحة.

الاستخدامات الشائعة للنماذج؟

  • بحث
  • نماذج الاتصال
  • عربات التسوق الخروج
  • تسجيل الدخول والتسجيل
  • و اكثر!

باستخدام React ، يمكننا أن نجعل نماذجنا أكثر تفاعلية وأقل ثباتًا.

هناك طريقتان رئيسيتان للتعامل مع النماذج في React ، تختلفان على المستوى الأساسي: كيفية إدارة البيانات.

  • إذا تم التعامل مع البيانات بواسطة DOM ، فإننا نسميهاالمكونات غير المنضبط
  • إذا تم التعامل مع البيانات بواسطة المكونات التي نسميهاالمكونات الخاضعة للرقابة

كما يمكنك أن تتخيل ، فإن المكونات التي يتم التحكم فيها هي ما ستستخدمه معظم الوقت. الحالة المكونة هي المصدر الوحيد للحقيقة ، وليس DOM. لكن في بعض الأحيان تضطر إلى استخدام مكونات غير تحكم ، على سبيل المثال عند استخدام بعض حقول النموذج التي لا تخضع للرقابة بطبيعتها بسبب سلوكها ، مثل<input type="file">حقل.

عندما تتغير حالة عنصر في حقل نموذج يديره أحد المكونات ، فإننا نتتبعه باستخدام امتدادonChangeينسب.

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
  }

handleChange(event) {}

render() { return ( <form> Username: <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

مع المكونات الطبقية ، من أجل وضع الدولة الجديدة ، يجب علينا الارتباطthisالىhandleChangeالطريقة ، خلاف ذلكthisلا يمكن الوصول إليه من خلال تلك الطريقة:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

render() { return ( <form> <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

وبالمثل ، نستخدم ملفonSubmitالسمة في النموذج لاستدعاءhandleSubmitالطريقة عند تقديم النموذج:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

handleSubmit(event) { alert(this.state.username) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“text” value={this.state.username} onChange={this.handleChange} /> <input type=“submit” value=“Submit” /> </form> ) } }

استخدامخطافكل شيء أبسط بكثير:

const Form = props => {
  const [username, setUsername] = useState()

const handleChangeUsername = e => { setUsername(e.target.value) }

const handleSubmit = event => { alert(username) event.preventDefault() }

render() { return ( <form onSubmit={handleSubmit}> Username: <input type=“text” value={username} onChange={handleChangeUsername} /> </form> ) } }

يمكن معالجة التحقق في نموذج فيhandleChangeالطريقة: يمكنك الوصول إلى القيمة القديمة للدولة ، والقيمة الجديدة. يمكنك التحقق من القيمة الجديدة وإذا لم تكن صالحة ، قم برفض القيمة المحدثة (وإبلاغها بطريقة ما للمستخدم)

نماذج HTML غير متسقة. لديهم تاريخ طويل ، وهذا واضح. ومع ذلك ، فإن React تجعل الأمور أكثر تناسقًا بالنسبة لنا ، ويمكنك الحصول على (وتحديث) الحقول باستخدامهاvalueينسب.

هنا أtextarea، على سبيل المثال:

<textarea value={this.state.address} onChange={this.handleChange} />

الشيء نفسه ينطبق علىselectبطاقة شعار:

<select value="{this.state.age}" onChange="{this.handleChange}">
  <option value="teen">Less than 18</option>
  <option value="adult">18+</option>
</select>

سبق أن ذكرنا<input type="file">حقل. هذا يعمل بشكل مختلف قليلا.

في هذه الحالة ، تحتاج إلى الحصول على مرجع للحقل عن طريق تعيينrefالسمة إلى خاصية معرّفة في المنشئ بـReact.createRef()، واستخدم ذلك للحصول على قيمته في معالج الإرسال:

class FileInput extends React.Component {
  constructor(props) {
    super(props)
    this.curriculum = React.createRef()
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleSubmit(event) { alert(this.curriculum.current.files[0].name) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“file” ref={this.curriculum} /> <input type=“submit” value=“Submit” /> </form> ) } }

هذا الالمكونات غير المنضبططريق. يتم تخزين الحالة في DOM بدلاً من حالة المكون (لاحظ أننا استخدمناthis.curriculumللوصول إلى الملف الذي تم تحميله ، ولم تمس ملفstate.

أعلم ما الذي تفكر فيه - بخلاف هذه الأساسيات ، يجب أن تكون هناك مكتبة تبسط كل هذا النموذج الذي يتعامل مع الأشياء وأتمتة التحقق من الصحة ومعالجة الأخطاء وغير ذلك ، أليس كذلك؟ هناك واحدة رائعة ،فورميك.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: