类型错误：这是未定义的 - React JS，Javascript

TypeError: this is undefined - React JS, Javascript

提问by codinglover

I am trying to implement a simple react component which change name on clicking. I am getting the error Error - TypeError: this is undefinedwhile loading my page which has below react component. The error seems to be in the setStateline.

我正在尝试实现一个简单的反应组件，该组件在单击时更改名称。Error - TypeError: this is undefined加载具有以下反应组件的页面时出现错误。错误似乎setState在行中。

class Layer5 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {buttonstate: false};

  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  handleClick(e) {
    e.preventDefault();

    this.setState({buttonstate: !this.state.buttonstate});      
  }

  render() {
    var icon = this.state.buttonstate ? 'images/image1.png' : 'images/image2.jpg';

    return (
      <div className="layer5">
        <a href="#" onClick={this.handleClick}><img src={icon} ></img></a>
      </div>
    );
  }
}

回答by Aluan Haddad

Either a) create a property lexically closed over the instance (this) using an arrow function or b) use .bind.

a)this使用箭头函数在实例 ( )上创建一个在词法上封闭的属性，或者 b) 使用.bind.

Do one or the other. Either a)

做一个或另一个。要么 a)

class Layer5 extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = e => {
      e.preventDefault();

      this.setState({buttonstate: !this.state.buttonstate});
    };
  }
}

or b)

或 b)

render() {
    const icon = this.state.buttonstate ? 'images/image1.png' : 'images/image2.jpg';

    return <div className="layer5">
        <a href="#" onClick={this.handleClick.bind(this)}>
          <img src={icon} >
          </img>
        </a>
      </div>;
  }
}

回答by Dream_Cap

You need to bind this in the constructor for the handleClick method.

您需要在 handleClick 方法的构造函数中绑定 this。

constructor(props) {
    super(props);

    this.state = {buttonstate: false};
    this.handleClick = this.handleClick.bind(this)
}

回答by akshay_sushir

import React from 'react'

class UsernameForm extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        username: ''
    }
    this.onchange=this.onChange.bind(this)
    this.onSubmit=this.onSubmit.bind(this)
}
onChange(e) {
    this.setState({
        username: e.target.value
    })
}

onSubmit(e) {
    e.preventDefault()
    this.props.onSubmit(this.state.username)
}

render() {
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                <input type='text'placeholder='What is your username ?' onChange={this.onChange} />
                <input type='submit' />
            </form>
        </div>
    )
}

}

}

export default UsernameForm

导出默认用户名表单

I am getting error: this is undefined

So that i bind this on {this.onChange} see the solution below

我收到错误：这是未定义的

因此，我将其绑定到 {this.onChange} 上，请参阅下面的解决方案

import React from 'react'


class UsernameForm extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        username: ''
    }
    this.onchange=this.onChange.bind(this)
    this.onSubmit=this.onSubmit.bind(this)
}

onChange(e) {
    this.setState({
        username: e.target.value
    })
}

onSubmit(e) {
    e.preventDefault()
    this.props.onSubmit(this.state.username)
}

render() {
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                <input type='text'placeholder='What is your username ?' onChange={this.onChange.bind(this)} />
                <input type='submit' />
            </form>
        </div>
    )
}

}

}

export default UsernameForm

导出默认用户名表单