javascript - 如何获取 Form.Control - React Bootstrap Date Picker 的值?
问题描述
我在下面有这个日期选择器。如何保存用户在 const 中选择的输入日期的值,以便以后使用?如果问题是初学者,我深表歉意。
import React from 'react'
import { Form } from 'react-bootstrap';
class BootstrapDate extends React.Component{
render(){
return(
<div>
<div className="row">
<div className="col-md-12">
<Form.Group controlId="duedate">
<Form.Control type="date" name="duedate" placeholder="Due date" />
</Form.Group>
</div>
</div>
</div>
)
}
}
export default BootstrapDate;
解决方案
只需在 Form.Control 中添加一个 Value 和 Onchage 方法
import "./styles.css";
import Form from "react-bootstrap/Form";
import { useState } from "react";
export default function App() {
const [date, setDate] = useState(new Date());
console.log("DATE", date);
return (
<div className="App">
<div>
<div className="row">
<div className="col-md-12">
<Form.Group controlId="duedate">
<Form.Control
type="date"
name="duedate"
placeholder="Due date"
value={date}
onChange={(e) => setDate(e.target.value)}
/>
</Form.Group>
</div>
</div>
</div>
</div>
);
}
推荐阅读
- sql - sql表中两列的区别
- c# - 使用 WebDriver 完成页面加载后,如何将鼠标悬停在页面内容之一上?加载后页面滚动到中心
- flutter - 带有模板模式的 Dart 枚举
- swift - 使用 Cryptokit 在钥匙串中存储钥匙时出现错误状态 -34018
- python - 为什么我的示例 google api 代码(python、admin、directory_v1)上出现 503 服务不可用?
- javascript - 为什么函数首先在console.log 中执行?
- java - 在 java 中使用 Connect Direct 传输 inputStream
- asp.net-mvc - 我想在 foreach 循环中的 div 上添加动态引导 bg 类
- ruby-on-rails - Rails Active Storage:从模型直接上传
- amazon-web-services - 如何通过 Jenkins CD 在 ECS 中的 ECR 中运行 docker 映像?