[javascript] غير قادر على الوصول إلى مثيل React (هذا) داخل معالج الأحداث


4 Answers

موراهاوس صحيح ، لكن هذا يمكن حلها بدون bind .

يمكنك استخدام وظيفة السهم مع اقتراح خصائص الفئة :

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

نظرًا لأنه يتم الإعلان عن دالة السهم في نطاق المُنشئ ، ولأن وظائف السهم تحافظ على this من نطاق التصريح الخاص به ، فكل شيء يعمل. الجانب السلبي هنا هو أن هذه لن تكون وظائف على النموذج ، سيتم إعادة صياغتها مع كل مكون. ومع ذلك ، هذا ليس الكثير من الجانب السلبي منذ bind النتائج في نفس الشيء.

Question

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

تتضمن الأخطاء النموذجية شيئًا مثل

لا يمكن قراءة الخاصية "setState" غير معرفة

أو

this.setState ليست وظيفة

هل تعرف لماذا؟ هنا هو الرمز:

import React from 'react'

class SomeClass 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 SomeClass



توصيتي هي استخدام وظائف السهم كخاصية

class SomeClass extends React.Component {
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

ولا تستخدم وظائف السهم

class SomeClass extends React.Component {
      handleClick(){
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

لأن النهج الثاني سيولد وظيفة جديدة كل استدعاء يجعل في الواقع هذا يعني إصدار جديد جديد من الدعائم ، مما لو كنت تهتم فيما بعد بالأداء يمكنك استخدام React.PureComponent أو في React.Component يمكنك تجاوز shouldComponentUpdate (nextProps، nextState) وفحص الضحلة عندما وصلت الدعائم




مرحبا إذا كنت لا تهتم حول ملزمة نفسك المكالمة وظيفتك. يمكنك استخدام "class-autobind" واستيرادها من هذا القبيل

import autobind from 'class-autobind';

class test extends Component {
  constructor(props){
  super(props);
  autobind(this);
}

لا تكتب autobind قبل المكالمة الفائقة لأنها لن تنجح




يمكنك حل هذا باتباع هذه الخطوات

قم بتغيير وظيفة sendContent باستخدام

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

تغيير وظيفة التقديم

<input type="text" ref="someref" value={this.state.inputContent} 
          onChange={(event)=>this.changeContent(event)} /> 
   <button onClick={(event)=>this.sendContent(event)}>Submit</button>



نحتاج إلى ربط وظيفة الحدث بالمكون في المُنشئ كما يلي ،

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  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 SomeClass

شكر




Related