reactjs - 使用日期选择器选择日期时出错
问题描述
React 组件存在问题。也许有人知道,这里有什么问题。我在我的项目中使用 react-datepicker 库来填充客户端的日期输入。所有表单输入都有效,但是当我尝试在日历下拉菜单中选择日期时出现错误。
我是新来的反应,也许在与各州合作时存在某种错误。如果有任何帮助,我将不胜感激!
这是清单:
import React, { Component } from 'react';
import axios from 'axios';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Transfer extends Component {
constructor(props) {
super(props);
this.state = {
value: [],
loading: true,
error: false,
startDate: new Date()
};
this.handleSubmit = this.handleSubmit.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
handleSubmit(e) {
e.preventDefault();
const data = {
name: this.state.name,
email: this.state.email,
phone: this.state.phone,
people: this.state.people,
date: this.state.date,
text: this.state.text
};
axios.post('http://localhost:5555/email/transfer', { data })
.then(res => {
console.log(data);
})
}
render() {
return (
<div className="wrapper">
<h5>Заказать трансфер</h5>
<form action="" onSubmit={this.handleSubmit}>
<div className="label-section">Имя</div>
<input name="name" id="name" type="text" defaultValue="" onChange={e => this.onChange(e)} /><br />
<div className="label-section">Email</div>
<input name="email" id="email" type="text" defaultValue="" onChange={e => this.onChange(e)} /><br />
<div className="label-section">Телефон</div>
<input name="phone" id="phone" type="text" defaultValue="" onChange={e => this.onChange(e)} /><br />
<div className="label-section">Количество человек</div>
<input name="people" id="people" type="number" min="1" max="11" defaultValue="" onChange={e => this.onChange(e)} />
<div className="label-section">Дата</div>
<DatePicker
id="date"
name="date"
defaultValue=""
selected={this.state.startDate}
onChange={e => this.onChange(e)}
/>
<div className="label-section">Оставьте нам сообщение</div>
<textarea name="text" id="text" type="text" cols={30} rows={10} defaultValue="" onChange={e => this.onChange(e)} /><br /><br />
<button type="submit" className="xbutton">Отправить</button>
</form>
</div>
);
}
}
export default Transfer;
谢谢你的帮助!)
解决方案
好的,我改变了一些东西,它奏效了。不确定我是否以更好的方式做到了,但它确实有效。
我声明了另一个函数:
onChangeDate(date) {
console.log(date.toISOString());
this.setState({ startDate: date })
}
并将其用于 Datepicker 组件:
<DatePicker
id="date"
name="date"
defaultValue=""
selected={this.state.startDate}
onChange={date => this.onChangeDate(date)}
/>
在这里,在数组中:
const data = {
name: this.state.name,
email: this.state.email,
phone: this.state.phone,
people: this.state.people,
date: this.state.startDate,
text: this.state.text
};
推荐阅读
- java - 我正在尝试构建 url 但出现异常
- awk - 使用 awk 过滤最后 100 行的日志
- css - 如何为具有相同类名的嵌套 div 设置样式?
- asp.net-mvc - Html.DropdownListFor 未在 Internet Explorer 11 中提交所选项目
- c++ - 使用 std::filesystem 输出作为 LPCWSTR
- javascript - 哪个单元测试设置是正确的?两个测试是否都在检查功能是否正确并正常工作?
- jmeter - JMeter - NonGUIDriver java.lang.IllegalArgumentException
- java - 国际象棋:移动验证中的重复代码 - Java
- c# - 返回资源类的实例
- php - How to store image in a database using laravel and then display it