如何访问事件函数内部的状态？

Question

I have a react component that is using a calendar to handle some date picking stuff. My jsx is pretty simple you can see it below:

  state = { 
    date: new Date(),
  };

  render() {
    return (
    //left out for the sake of brevity...
    Date: {this.state.date.toString()}
    <Calendar onChange={dateChange} activeStartDate={this.state.date} />
    //...
  )}

  function dateChange(date) {
    console.log(date)
    console.log(this)
  }

This renders my calendar fine and the date string after Date: looks correct. My problem is that this is always null when I change the date. I would like to be able to access this.state.date from the dateChange function but I can't figure out how to do this. I attempted to bind using the code below:

  constructor() {
    super();
    this.dateChange = this.dateChange.bind(this)
  }

But this returns the error Cannot read property 'bind' of undefined .

How do I make this and by extension my current state available in my dateChange function?

Answer 1

Define it inside of your class, as a class method, without function word

class yourClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
        this.dateChange = this.dateChange.bind(this);
      }

    render() {
        return (
        //left out for the sake of brevity...
        <Calendar onChange={this.dateChange} activeStartDate={this.state.date} />
        //...
        );
    }

    dateChange(date) {
        console.log(date);
        console.log(this);
    }
}

That way you can use this.dateChange = this.dateChange.bind(this) to bind this to your class

I also moved the state to your constructor; that's where it is normally initialized

And I removed Date: {this.state.date.toString()} because I am not sure what were you trying to do wit it (is it another Component?) - anyway I do not think it affects the response to your question