使用反应日期时间组件的值设置状态

Question

请我需要帮助。我正在使用一个 react-dateTime 组件，我只是试图获取该组件的值，就像表单中的所有其他字段一样。但是我无法获取所选日期的值，更不用说将其与其他字段上的其他属性一起存储了。

这是我的代码：

日期时间组件

<Datetime
onChange={this.handleChange}
value={startDate}
timeFormat={true}
name="startDate"
inputProps={{ placeholder: "Start Date" }}
/>

事件处理程序

handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};

第二个更改处理程序

handleSelectDate = event => {
if (event.target.name === "startDate") {
this.setState({ startDate: event.target.value});
} else {
this.setState({ endDate: event.target.value });
}
}```
The state object
this.state= { startDate: '' }

我尝试了不同的方法，目前我收到一个错误，即 event.target 未定义，所以根本没有事件，我也尝试通过在 onChange 上调用事件来初始化处理程序

谢谢

Answer 1

它不像常规input那样通过name来获取其值

onChange：日期更改时的回调触发器。如果输入中的日期有效，则回调将选定的时刻对象作为唯一的参数接收。如果输入中的日期无效，则回调将接收输入的值(字符串(。文档

试试这个：

class App extends React.Component {
state = {
startDate: ""
}
// You need to bind "this"
handleChange = this.handleChange.bind(this)
// Receives the selected "moment" object as only parameter
handleChange(date) {
this.setState({ startDate: date })
}
render() {
return (
<div>
<Datetime
value={this.state.startDate}
onChange={this.handleChange}
timeFormat={true}
inputProps={{ placeholder: "Start Date" }}
/>
<hr />
Select date:{" "}
{this.state.startDate ? this.state.startDate.toString() : "no selected date"}
</div>
)
}
}

检查此代码沙盒示例。

虽然它有效，但它有点过时了，我鼓励你检查反应日期时间选择器或反应日期选择器