如何获取React Bootstrap日期选择器中Form.Control的值？

Question

我有下面这个日期选择器。我该如何将用户选择的输入日期值保存在常量中，以便稍后使用？如果问题比较初级，我很抱歉。

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;

- chr0sy

Answer 1

只需在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>
  );
}

- Akhil