Reaktion: "dies" ist innerhalb einer Komponentenfunktion undefiniert

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()
  }

Ich möchte den loopActiveStatus beim Umschalten aktualisieren , aber das thisObjekt ist im Handler nicht definiert. Laut Tutorial-Dokument sollte ich mich thisauf die Komponente beziehen. Vermisse ich etwas

ES6 React.Component bindet Methoden nicht automatisch an sich selbst. Sie müssen sie selbst im Konstruktor binden. So was:

constructor (props){
  super(props);

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

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

}

Es gibt verschiedene Möglichkeiten.

Eine besteht darin, this.onToggleLoop = this.onToggleLoop.bind(this);den Konstruktor hinzuzufügen .

Ein weiterer Grund sind Pfeilfunktionen onToggleLoop = (event) => {...}.

Und dann ist da noch etwas onClick={this.onToggleLoop.bind(this)}.

Schreiben Sie Ihre Funktion folgendermaßen:

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

Fettpfeilfunktionen

Die Bindung für das Schlüsselwort ist außerhalb und innerhalb der Fettpfeilfunktion gleich. Dies unterscheidet sich von Funktionen, die mit function deklariert wurden und diese beim Aufruf an ein anderes Objekt binden können. Das Verwalten dieser Bindung ist sehr praktisch für Vorgänge wie das Mapping: this.items.map (x => this.doSomethingWith (x)).

Ich bin in einer Renderfunktion auf eine ähnliche Bindung gestoßen und habe den Kontext thisfolgendermaßen übergeben:

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

Ich habe auch verwendet:

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

Sie sollten beachten, dass dies thisdavon abhängt, wie die Funktion aufgerufen wird, dh: Wenn eine Funktion als Methode eines Objekts aufgerufen wird, thiswird sie auf das Objekt gesetzt, für das die Methode aufgerufen wird.

thisist im JSX-Kontext als Ihr Komponentenobjekt verfügbar, sodass Sie Ihre gewünschte Methode inline als thisMethode aufrufen können .

Wenn Sie nur einen Verweis auf Funktion / Methode übergeben, wird React diese anscheinend als unabhängige Funktion aufrufen.

onClick={this.onToggleLoop} // Here you just passing reference, React will invoke it as independent function and this will be undefined

onClick={()=>this.onToggleLoop()} // Here you invoking your desired function as method of this, and this in that function will be set to object from that function is called ie: your component object

Wenn Sie babel verwenden, binden Sie 'this' mit dem ES7-Bindungsoperator https://babeljs.io/docs/en/babel-plugin-transform-function-bind#auto-self-binding

export default class SignupPage extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(e) {
    e.preventDefault(); 

    const data = { 
      email: this.refs.email.value,
    } 
  }

  render() {

    const {errors} = this.props;

    return (
      <div className="view-container registrations new">
        <main>
          <form id="sign_up_form" onSubmit={::this.handleSubmit}>
            <div className="field">
              <input ref="email" id="user_email" type="email" placeholder="Email"  />
            </div>
            <div className="field">
              <input ref="password" id="user_password" type="new-password" placeholder="Password"  />
            </div>
            <button type="submit">Sign up</button>
          </form>
        </main>
      </div>
    )
  }

}

Wenn Sie Ihre erstellte Methode in den Lebenszyklusmethoden wie componentDidMount ... aufrufen , können Sie nur die Funktion this.onToggleLoop = this.onToogleLoop.bind(this)und den Fettpfeil verwenden onToggleLoop = (event) => {...}.

Der normale Ansatz der Deklaration einer Funktion im Konstruktor funktioniert nicht, da die Lebenszyklusmethoden früher aufgerufen werden.

in meinem Fall war dies die Lösung = () => {}

methodName = (params) => {
//your code here with this.something
}

In meinem Fall musste ich für eine zustandslose Komponente, die den Ref mit forwardRef erhalten hat, das tun, was hier gesagt wird: https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd

Von hier aus (onClick hat keinen Zugriff auf das Äquivalent von 'this')

const Com = forwardRef((props, ref) => {
  return <input ref={ref} onClick={() => {console.log(ref.current} } />
})

Dazu (es funktioniert)

const useCombinedRefs = (...refs) => {
  const targetRef = React.useRef()

  useEffect(() => {
    refs.forEach(ref => {
      if (!ref) return

      if (typeof ref === 'function') ref(targetRef.current)
      else ref.current = targetRef.current
    })
  }, [refs])

  return targetRef
}

const Com = forwardRef((props, ref) => {
  const innerRef = useRef()
  const combinedRef = useCombinedRefs(ref, innerRef)

  return <input ref={combinedRef } onClick={() => {console.log(combinedRef .current} } />
})