Réagir: "ceci" n'est pas défini dans une fonction de composant

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

Je veux mettre à jour l' loopActiveétat sur bascule, mais l' thisobjet n'est pas défini dans le gestionnaire. Selon la doc du tutoriel, je thisdevrais me référer au composant. Est-ce que je manque quelque chose?

ES6 React.Component ne lie pas automatiquement les méthodes à lui-même. Vous devez les lier vous-même dans le constructeur. Comme ça:

constructor (props){
  super(props);

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

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

}

Il y a plusieurs façons.

La première consiste à ajouter this.onToggleLoop = this.onToggleLoop.bind(this);le constructeur.

Un autre est les fonctions fléchées onToggleLoop = (event) => {...}.

Et puis il y a onClick={this.onToggleLoop.bind(this)}.

Écrivez votre fonction de cette façon:

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

Fonctions de la grosse flèche

la liaison pour le mot-clé this est la même à l'extérieur et à l'intérieur de la fonction grosse flèche. Ceci est différent des fonctions déclarées avec function, qui peuvent lier ceci à un autre objet lors de l'appel. Le maintien de cette liaison est très pratique pour des opérations comme le mappage: this.items.map (x => this.doSomethingWith (x)).

J'ai rencontré une liaison similaire dans une fonction de rendu et j'ai fini par passer le contexte de thisde la manière suivante:

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

J'ai également utilisé:

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

Vous devriez remarquer que cela thisdépend de la façon dont la fonction est appelée, c'est-à-dire: lorsqu'une fonction est appelée en tant que méthode d'un objet, elle thisest définie sur l'objet sur lequel la méthode est appelée.

thisest accessible dans le contexte JSX en tant qu'objet composant, vous pouvez donc appeler la méthode souhaitée en ligne en tant que thisméthode.

Si vous passez simplement une référence à une fonction / méthode, il semble que react l'appellera en tant que fonction indépendante.

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

Si vous utilisez babel, vous liez 'this' à l'aide de l'opérateur de liaison ES7 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>
    )
  }

}

Si vous appelez votre méthode créée dans les méthodes de cycle de vie telles que componentDidMount ..., vous ne pouvez utiliser que la fonction this.onToggleLoop = this.onToogleLoop.bind(this)et la fonction de la grosse flèche onToggleLoop = (event) => {...}.

L'approche normale de la déclaration d'une fonction dans le constructeur ne fonctionnera pas car les méthodes de cycle de vie sont appelées plus tôt.

dans mon cas, c'était la solution = () => {}

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

Dans mon cas, pour un composant sans état qui a reçu la référence avec forwardRef, j'ai dû faire ce qu'il est dit ici https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd

À partir de là (onClick n'a pas accès à l'équivalent de 'this')

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

Pour cela (ça marche)

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