如何获取 onChange 事件的价值？答案

【问题标题】：How to get value onCahnge event?如何获取 onChange 事件的价值？
【发布时间】：2016-12-29 12:36:26
【问题描述】：

我正在使用react-input-calendar。我想获取日期 onChange 事件的值，然后将其传递到新页面。我该怎么做？

代码如下：

constructor() {
    super();
    this.state = {value: new Date(),inputdate:''};
    this.handleChange = this.handleChange.bind(this);
}

handleChange(newDate, event) { 
    console.log(newDate);
    this.setState({inputdate:newDate});
}

<Calendar format='dddd DD MMM' closeOnSelect={true} date={this.state.value}
ref="inputdate" inputName="inputdate" computableFormat='MM-DD-YYYY' onChange=
{this.handleChange.bind(this,"inputdate")} />

如何在handleChange 中获得价值？

【问题讨论】：

setState 不起作用是什么意思？你真的在某个地方使用它吗？如果你去掉 bind 末尾的“inputdate”，它应该会在你更改日期时出现。 this.setState({inputdate:newDate}, function() { console.log(this.state.inputdate) }); 如果它的值正确，那么您可以在渲染中执行 <div>{this.state.inputdate}</div>。也从构造函数中删除inputdate:''。这不是必需的。你需要自己调试这段代码并单步执行

标签： javascript reactjs input calendar

【解决方案1】：

props.onChange, 功能

默认值：空

设置一个在所选日期发生变化时触发的功能。它将以 props.computableFormat 格式返回日期。

根据文档，它应该像这样可用：

constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
}
handleChange(newDate, event) {
    //newDate should be passed here
    console.log(newDate);
}

<Calendar format='dddd DD MMM' closeOnSelect={true} date={this.state.value0}
ref="inputdate" inputName="inputdate" computableFormat='MM-DD-YYYY' onChange=
{this.handleChange} />

检查库的src 代码以及传入对象的属性。看起来库调用了 onChange 属性并传入了newDate。

if (this.props.onChange) {
    this.props.onChange(computableDate)
}

【讨论】：

它的抛出错误Uncaught TypeError: Cannot read property 'value' of undefined
@TriyugiNarayanMani 立即尝试
@TriyugiNarayanMani 不，你不需要那个。那是图书馆的 src 代码。它调用了我们用 newdate 传入的onChange 函数。看看我编辑的handleChange代码
@TriyugiNarayanMani 在构造函数中绑定它，因为它不会像以前那样每次都创建一个新函数。见编辑