تعذر الوصول إلى مثيل React (this) داخل معالج الحدث

Rayden Storm · 20 مارس 2021

أنا أكتب مكونًا بسيطًا في ES6 (مع BabelJS) ، ووظائف this.setState لا تعمل.

Cannot read property 'setState' of undefined

ها هو الكود:

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default App

محمد أيت لعرايك · 20 مارس 2021

أنا أنصحك بإستخدام arrow function مثال

class SomeClass extends React.Component {
  changeContent = (e) => {  //  arrow function هنا تم إستخدام دالة الأسهم 
   this.setState({inputContent: e.target.value}) // this والأن يمكنك الوصول إلى المكون عن طريق  
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

في حالة عدم إستخدام دالة السهم سيكون الكود على الشكل التالي:

class SomeClass extends React.Component {
     
      changeContent(e) {
        this.setState({inputContent: e.target.value})  //هنا خطأ
      }
                
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

وهذا يعمل بسبب حقيقة أن وظائف السهم arrow functions لا تكون this خاصة بها ، ولكن تأخد هذا من المكون المجودة بها. في هذه الحالة ، فإن this يشير إلى المكون الخاص بك -

تم التعديل في 20 مارس 2021 بواسطة محمد أيت لعرايك

تعذر الوصول إلى مثيل React (this) داخل معالج الحدث

السؤال

Rayden Storm

1 جواب على هذا السؤال

Recommended Posts

محمد أيت لعرايك

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية