无法读取未定义

时间:2017-09-24 10:48:18

标签: reactjs

在我的渲染方法中,我有组件

<DatePicker selected={this.state.startDate} onChange={this.handleChange()}/>

handleChange正在关注

handleChange: function (e) {
  var that = this;
  console.log(e.target.value)
  return function () {
    that.setState({
      startDate: e.target.value
    });
  }
},

当我尝试使用此组件加载页面时,出现错误

  

无法读取未定义

的属性'target'

我做错了什么?

6 个答案:

答案 0 :(得分:15)

问题是您正在调用此行中的函数:

onChange={this.handleChange()}

您只需将函数作为值传递给onChange而不调用它。

onChange={this.handleChange}

使用括号时,您将调用函数/方法,而不是将其与事件处理程序绑定。比较以下两个例子:

//invokes handleChange() and stores what the function returns in testA.
const testA = this.handleChange()  

VS

//stores the function itself in testB. testB be is now a function and may be invoked - testB();
const testB = this.handleChange 

答案 1 :(得分:1)

如果使用箭头功能传递事件,则应尝试以下操作:

onChange={(e) => handleChange(e)}

答案 2 :(得分:0)

您正在执行功能而不是将其作为道具传递。

您需要更改此内容,

 onChange={this.handleChange()}

有了这个,

 onChange={this.handleChange}

答案 3 :(得分:0)

只需这样做

data[:2][0]

它会自动传递函数的事件参数。你的其余代码还可以。

答案 4 :(得分:0)

如果上述所有建议都不起作用,则将此onChange={this.handleChange}更改为此onChange={() => this.handleChange()}也可能会有所帮助。

答案 5 :(得分:0)

您可以这样解决

Lines <- "year month terr_size id
2018  1    20        1  
2018  2    30        1  
2019  1    5         1   
2019  2    10        1  
2018  3    20        2  
2018  5    25        2  
2018  6    20        2  
2018  7    20        2  
2019  1    10        2  
2019  2    5         2  
2019  3    20        2  
2019  4    30        2  "
DF <- read.table(text = Lines, header = TRUE)