Question

我正在尝试实现一个简单的反应组件，它可以在点击时更改名称。我在加载我的页面时遇到以下错误，该页面有以下反应组件。我究竟做错了什么？我是Javascript和React JS的新手。错误似乎在setstate行。

错误 - TypeError：这是未定义的

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

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

Answer 2

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

   constructor(props) {
        super(props);

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

Answer 3

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

}

导出默认的UsernameForm

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

以便我将此绑定到{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>
    )
}

}

导出默认的UsernameForm

TypeError：这是未定义的 - React JS，Javascript

3 个答案: