Tôi có ngày này dưới đây. Làm thế nào tôi có thể lưu giá trị của ngày đầu vào mà người dùng chọn trong một const để sau này tôi có thể sử dụng? Tôi xin lỗi nếu câu hỏi là người mới bắt đầu. 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;
Đã hỏi ngày 1 tháng 3 năm 2021 lúc 21:19Mar 1, 2021 at 21:19
Chỉ cần thêm một giá trị và phương thức onchage trong form.control 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>
);
}
Đã trả lời ngày 2 tháng 3 năm 2021 lúc 4:38Mar 2, 2021 at 4:38 AkhilakhilAkhil 3853 Huy hiệu bạc13 Huy hiệu Đồng3 silver badges13 bronze badges Chuỗi | Arrayof | con sốĐược kiểm soát bởi: input7, prop ban đầu: input8 BSPREFIX textarea0
Thay đổi thành phần cơ bản CSS Base Class và công cụ sửa đổi tên lớp Tiền tố. Đây là một cửa thoát hiểm để làm việc với CSS Bootstrap tùy chỉnh nặng. Kiểm soát hình thứcCung cấp các điều khiển biểu mẫu văn bản như S và S nâng cấp với các kiểu tùy chỉnh, kích thước, trạng thái lấy nét và nhiều hơn nữa. Thí dụĐối với các hình thức văn bản, các điều khiển, giống như input và ____ 3s, sử dụng thành phần FormControl. FormControl bổ sung một số phong cách bổ sung cho ngoại hình chung, trạng thái tập trung, kích thước, và nhiều hơn nữa. Kích thướcSử dụng size trên <FormControl> để thay đổi kích thước của đầu vào. Vô hiệu hóaThêm disabled prop trên một đầu vào để cung cấp cho nó một sự xuất hiện màu xám và loại bỏ các sự kiện con trỏ.Chỉ đọcThêm readOnly prop trên đầu vào để ngăn chặn sửa đổi giá trị của đầu vào. Đầu vào chỉ đọc có vẻ nhẹ hơn (giống như đầu vào bị vô hiệu hóa), nhưng giữ lại con trỏ tiêu chuẩn.Copy import code for the Form component
| Văn bản đơn giản | Nếu bạn muốn có các phần tử đọc trong biểu mẫu của mình được tạo kiểu dưới dạng văn bản thuần túy, hãy sử dụng plaintext Prop trên FormControls để loại bỏ kiểu dáng trường biểu mẫu mặc định và bảo tồn lề và đệm chính xác. | Đầu vào tập tin | Màu sắc |
|---|
| API | 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>
);
}
0 Mã nhập khẩu cho thành phần biểu mẫu
|
| Tên
| | Loại hình | Mặc định
| Sự mô tả | Tham khảo
| | Phản ứng | boolean
|
| FormControl 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>
);
}
1 sẽ được chuyển tiếp đến phần tử đầu vào bên dưới, có nghĩa là trừ khi 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>
);
}
2 là thành phần tổng hợp, nó sẽ là một nút DOM, khi được giải quyết.
| | như | 'Đầu vào' | 'Textarea' | loại nguyên tố
|
| 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>
);
}
3
| | Phần tử HTML cơ bản để sử dụng khi hiển thị FormControl. | sợi dây
|
| Đầu vào HTML input4, chỉ có liên quan nếu 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>
);
}
2 là 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>
);
}
3 (mặc định).
| | giá trị | boolean
| Chuỗi | Arrayof | con số | Được kiểm soát bởi: input7, prop ban đầu: input8
| Thuộc tính input0 của đầu vào cơ bản | boolean
| Chuỗi | Arrayof | con số | Được kiểm soát bởi: input7, prop ban đầu: input8
| Thuộc tính input0 của đầu vào cơ bản | function
|
| BSPREFIX
| | văn bản thô | boolean
|
| Kết xuất đầu vào dưới dạng văn bản đơn giản.Thường được sử dụng dọc theo readOnly.
| | chỉ đọc | boolean
|
| Làm cho điều khiển một cách đọc được
| | kích thước | input2 |input3 | input3
|
| Biến thể kích thước đầu vào
| | loại hình | sợi dây
|
| Đầu vào HTML input4, chỉ có liên quan nếu 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>
);
}
2 là 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>
);
}
3 (mặc định).
| | giá trị | Chuỗi |Arrayof |con số
|
| Được kiểm soát bởi: input7, prop ban đầu: input8 Thuộc tính input0 của đầu vào cơ bản
| | BSPREFIX | sợi dây
| Đầu vào HTML input4, chỉ có liên quan nếu 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>
);
}
2 là 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>
);
}
3 (mặc định). | giá trịThis is an escape hatch for working with heavily customized bootstrap css.
|
| 
