Question

我有一个using a calendar的react组件，可以处理一些日期选择问题。我的jsx非常简单，您可以在下面看到它：

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

这使我的日历正常，并且Date:之后的日期字符串看起来正确。我的问题是，更改日期时this始终为null。我希望能够从this.state.date函数访问dateChange，但是我不知道该怎么做。我尝试使用以下代码进行绑定：

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

但这会返回错误Cannot read property 'bind' of undefined。

如何通过dateChange函数使当前状态以及扩展状态变为可用？

Answer 1

在类内部将其定义为类方法，不带功能词

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

这样，您可以使用this.dateChange = this.dateChange.bind(this)将this绑定到您的班级

我也将状态移到了您的构造函数中；那是它通常被初始化的地方

我删除了Date: {this.state.date.toString()}，因为我不确定您是想做什么（它是另一个组件吗？）-无论如何，我认为它不会影响您对问题的回答

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

1 个答案: