reactjs - react event

Reaccionar: "esto" no está definido dentro de una función componente

Question

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

Quiero actualizar el estado loopActive en alternar, pero this objeto no está definido en el controlador. De acuerdo con el tutorial doc, this debería referirme al componente. ¿Me estoy perdiendo de algo?

Answer 1

ES6 React.Component no se vincula automáticamente a sí mismo. Debes vincularlos tú mismo en el constructor. Me gusta esto:

constructor (props){
  super(props);

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

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

}

Answer 2

Escribe tu función de esta manera:

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

Funciones Fat Arrow

El enlace para la palabra clave es el mismo fuera y dentro de la función de flecha gruesa. Esto es diferente de las funciones declaradas con function, que pueden vincular esto a otro objeto tras la invocación. Mantener este enlace es muy conveniente para operaciones como mapeo: this.items.map (x => this.doSomethingWith (x)).

Answer 3

Hay un par de maneras.

Una es agregar this.onToggleLoop = this.onToggleLoop.bind(this); en el constructor

Otra es la función de flecha onToggleLoop = (event) => {...} .

Y luego está onClick={this.onToggleLoop.bind(this)} .

Answer 4

Me encontré con un enlace similar en una función de render y terminé pasando el contexto de this de la siguiente manera:

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

También he usado:

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

Answer 5

Si está utilizando babel, puede vincular ''esto'' con el operador de vinculación 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>
    )
  }

}

Answer 6

Si llama a su método creado en los métodos de ciclo de vida como componentDidMount ..., entonces solo puede usar this.onToggleLoop = this.onToogleLoop.bind(this) y la función de flecha onToggleLoop = (event) => {...} .

El enfoque normal de la declaración de una función en el constructor no funcionará porque los métodos del ciclo de vida se llaman anteriormente.