TypeError: this is undefined - React JS, Javascript答案

【问题标题】：TypeError: this is undefined - React JS, JavascriptTypeError: this is undefined - React JS, Javascript
【发布时间】：2018-05-17 11:40:37
【问题描述】：

我正在尝试实现一个简单的反应组件，它会在点击时更改名称。我在加载具有以下反应组件的页面时收到错误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>
    );
  }
}

【问题讨论】：

在哪一行？很可能它在handleClick 中......常见的解决方案是在构造函数中添加this.handleClick = this.handleClick.bind(this) 行 - 因为this 对事件处理程序很棘手
这篇文章解释了 5 种不同的方法来解决这个问题的优缺点：medium.freecodecamp.org/…

标签： javascript html reactjs

【解决方案1】：

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

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

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

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

或 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>;
  }
}

【讨论】：

【解决方案2】：

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

}

导出默认用户名表单

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

所以我将它绑定在 {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>
    )
}

}

导出默认用户名表单

【讨论】：