reactjs - الرد: "هذا" غير معرف داخل وظيفة المكون




this (4)

ES6 React.Component لا يقوم بربط الطرق تلقائيًا بنفسه. تحتاج إلى ربطها بنفسك في المنشئ. مثله:

constructor (props){
  super(props);

  this.state = {
      loopActive: false,
      shuffleActive: false,
    };

  this.onToggleLoop = this.onToggleLoop.bind(this);

}
class PlayerControls extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loopActive: false,
      shuffleActive: false,
    }
  }

  render() {
    var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"

    return (
      <div className="player-controls">
        <FontAwesome
          className="player-control-icon"
          name='refresh'
          onClick={this.onToggleLoop}
          spin={this.state.loopActive}
        />
        <FontAwesome
          className={shuffleClassName}
          name='random'
          onClick={this.onToggleShuffle}
        />
      </div>
    );
  }

  onToggleLoop(event) {
    // "this is undefined??" <--- here
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
  }

أريد تحديث حالة loopActive عند التبديل ، لكن this الكائن غير معرف في المعالج. وفقا لوثيقة البرنامج التعليمي ، وأنا يجب أن تشير إلى هذا المكون. هل فاتني شيء؟


إذا this.onToggleLoop = this.onToogleLoop.bind(this) تم إنشاؤها في أساليب دورة الحياة مثل componentDidMount ... عندها يمكنك فقط استخدام this.onToggleLoop = this.onToogleLoop.bind(this) ووظيفة السهم onToggleLoop = (event) => {...} .

لن تعمل الطريقة المعتادة لإعلان وظيفة في المُنشئ لأن أساليب دورة الحياة تسمى سابقًا.


اكتب وظيفتك بهذه الطريقة:

onToggleLoop = (event) => {
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
}

وظائف سهم الدهون

الربط للكلمة الرئيسية هذا هو نفسه خارج وداخل وظيفة السهم الدهون. هذا يختلف عن الوظائف المعلنة مع الوظيفة ، والتي يمكن أن تربط هذا بكائن آخر عند الاحتجاج. الحفاظ على هذا الربط مناسب جدًا لعمليات مثل التعيين: this.items.map (x => this.doSomethingWith (x)).


لقد واجهت ربطًا مشابهًا في دالة تقديم وانتهى بي الأمر بتمرير سياق this بالطريقة التالية:

{someList.map(function(listItem) {
  // your code
}, this)}

لقد استخدمت أيضا:

{someList.map((listItem, index) =>
    <div onClick={this.someFunction.bind(this, listItem)} />
)}




this