Lựa chọn
Tùy chỉnh người gốc với CSS tùy chỉnh thay đổi sự xuất hiện ban đầu của phần tử.
Mặc định
Kích thước
Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các đầu vào văn bản có kích thước tương tự của chúng tôi.
API
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
1Copy Mã nhập cho thành phần biểu mẫuCopy import code for the Form component
Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các đầu vào văn bản có kích thước tương tự của chúng tôi. | boolean | API | |
1Copy Mã nhập cho thành phần biểu mẫu | Tên | Loại hình | |
Sự mô tả | boolean | Vô hiệu hóa | Làm cho điều khiển bị tắt |
htmlsize | boolean | Vô hiệu hóa | Làm cho điều khiển bị tắt |
htmlsize | function | con số | |
Thuộc tính kích thước của phần tử HTML bên dưới. Chỉ định số lượng tùy chọn có thể nhìn thấy. | không có hiệu lực | | 2
| |
Thêm các kiểu xác thực "không hợp lệ" vào nhãn điều khiển và đi kèm | isvalid | Thêm các kiểu xác thực "hợp lệ" vào điều khiển onchange | |
Một cuộc gọi lại bị bắn khi 4 prop thay đổi | kích thước | 5 | 6 | Biến thể kích thướcThis is an escape hatch for working with heavily customized bootstrap css. |
5
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Tôi có một thành phần biểu mẫu phản ứng bootstrap, trong đó tôi muốn nhận được giá trị của một điều khiển biểu mẫu chọn. Tôi đã cố gắng cập nhật giá trị của một móc của tôi với một onchange, nhưng dường như tôi không thể làm cho nó hoạt động [nhập luôn luôn là một chuỗi trống], mã hiện tại của tôi như sau.
const [type, setType]: any = useState[''];
render[
Select Norm Type
Dictamen
Constancia
Complemento
value={type}
onChange={[e: any] => setText[e.target.value]}
];
Các cách tiếp cận tương tự đã làm việc với các điều khiển biểu mẫu khác, nhưng có lẽ có một cái gì đó khác nhau về Chọn.
Isherwood
54,8K15 Huy hiệu vàng108 Huy hiệu bạc148 Huy hiệu đồng15 gold badges108 silver badges148 bronze badges
Đã hỏi ngày 17 tháng 5 năm 2020 lúc 20:14May 17, 2020 at 20:14
George Francisgeorge FrancisGeorge Francis
4022 Huy hiệu vàng6 Huy hiệu bạc15 Huy hiệu đồng2 gold badges6 silver badges15 bronze badges
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
4 và
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
7 cần phải là một phần của 1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
3 [như một chỗ dựa]. Bạn đã đặt chúng là trẻ em và do đó vấn đề.Bản sao làm việc của mã của bạn ở đây
Đoạn mã làm việc
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
Đã trả lời ngày 18 tháng 5 năm 2020 lúc 3:58May 18, 2020 at 3:58
0
Nhận chọn giá trị phần tử bằng cách sử dụng ref
Chúng tôi đã thấy trong ví dụ trên rằng giá trị phần tử chọn được cập nhật dựa trên sự kiện
7 và bây giờ chúng tôi cũng sẽ nhận được giá trị cập nhật bằng cách sử dụng
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
4.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
Để có được tham chiếu của phần tử, chúng tôi sử dụng 1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 và giá trị của nó có thể được truy cập trong các thành phần hiện có.
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
Bước đầu tiên là tạo
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 trong thành phần React.Bây giờ, bước tiếp theo là triển khai phần tử chọn phản ứng Bootstrap với thuộc tính
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 được thêm vào.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 and form elements. HTML doesn't allow changing components directly, but it's possible using the event handler. One-way data binding sends the value, and then HTML can be rendered inside the DOM.Sử dụng phần tử chọn
Phần tử chọn thường được sử dụng để yêu cầu nhiều tùy chọn và cho phép người dùng chọn bất kỳ tùy chọn nào từ danh sách bằng sự kiện Click.
Dưới đây là một triển khai đơn giản của phần tử chọn.
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
JSX
Trong ví dụ trên, các điều khiển biểu mẫu được tạo bằng thẻ
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
5 làm loại chọn, như được hiển thị bên dưới.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
5 tag as a type of select, as shown below.1
JSX
Trong ví dụ trên, các điều khiển biểu mẫu được tạo bằng thẻ
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
5 làm loại chọn, như được hiển thị bên dưới.
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
7, which is used to get the updated value of the select element.Cùng với phần tử chọn, có một thuộc tính được thêm vào được đính kèm có tên
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
7, được sử dụng để nhận giá trị cập nhật của phần tử chọn.1onChangeColor[] {
2 console.log[event.target.value];
3}
JSX
Trong ví dụ trên, các điều khiển biểu mẫu được tạo bằng thẻ
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
5 làm loại chọn, như được hiển thị bên dưới.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
7, you can further process the value for different purposes, such as submitting the value to the database.Cùng với phần tử chọn, có một thuộc tính được thêm vào được đính kèm có tên
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
7, được sử dụng để nhận giá trị cập nhật của phần tử chọn.
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
Vì vậy, có thể có quyền truy cập vào giá trị được cập nhật sau khi giá trị của nó thay đổi, như được hiển thị bên dưới.
7 event, and now we will get the updated value using
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
4 as well.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
Để có được tham chiếu của phần tử, chúng tôi sử dụng
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 và giá trị của nó có thể được truy cập trong các thành phần hiện có.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4, and its value can be accessed throughout the existing components.Bước đầu tiên là tạo
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 trong thành phần React.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 in the React component.1constructor[] {
2 super[];
3 this.myRef = React.createRef[];
4}
JSX
Bây giờ, bước tiếp theo là triển khai phần tử chọn phản ứng Bootstrap với thuộc tính
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 được thêm vào.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 property.1render[] {
2 return [
3
4 Simple select element of react-bootstrap
5
6 Select any color :
7
12 Red
13 Blue
14 Green
15 Black
16 Orange
17
18 Get color
19
20 ];
21}
JSX
Bây giờ, bước tiếp theo là triển khai phần tử chọn phản ứng Bootstrap với thuộc tính
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 được thêm vào.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 along with the select element followed by the name of reference you created before.Có thuộc tính được thêm vào
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 cùng với phần tử chọn theo sau là tên tham chiếu bạn đã tạo trước đó.1onButtonClick[] {
2 console.log[this.myRef.current.value];
3}
JSX
Bây giờ, bước tiếp theo là triển khai phần tử chọn phản ứng Bootstrap với thuộc tính
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 được thêm vào.Có thuộc tính được thêm vào
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 cùng với phần tử chọn theo sau là tên tham chiếu bạn đã tạo trước đó.Nhưng phần quan trọng là truy cập tùy chọn đã chọn từ phần tử chọn.
Câu lệnh trích xuất phần tử được tham chiếu hiện tại từ DOM, và hơn nữa, nó lấy giá trị dựa trên tương tác của người dùng.
4. Often, however, the select element will be part of the form element.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
Đây là một trong những cách tiếp cận ít được sử dụng hơn bởi vì bạn phải cung cấp tham chiếu đến từng yếu tố mà bạn muốn có được các giá trị.
1render[] {
2 return [
3
4 Simple select element of react-bootstrap
5
6
7
8 Select Color :
9
10 Red
11 Blue
12 Green
13 Black
14 Orange
15
16
17 Submit form
18
19
20 ];
21}
JSX
Bây giờ, bước tiếp theo là triển khai phần tử chọn phản ứng Bootstrap với thuộc tính
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 được thêm vào.1
5, that can be used to submit the form once a user clicks on the submit button.1onFormSubmit[event] {
2 event.preventDefault[];
3 console.log["Color value is :", this.state.color];
4}
JSX
Bây giờ, bước tiếp theo là triển khai phần tử chọn phản ứng Bootstrap với thuộc tính
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 được thêm vào.1
6, can be used to listen for the change event of the select element, as shown below.
Select Norm Type
{
console.log["e.target.value", e.target.value];
setType[e.target.value];
}}
>
Dictamen
Constancia
Complemento
0JSX
Bây giờ, bước tiếp theo là triển khai phần tử chọn phản ứng Bootstrap với thuộc tính
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 được thêm vào.1
7 value sends the data to the database for processing.Có thuộc tính được thêm vào
1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;
4 cùng với phần tử chọn theo sau là tên tham chiếu bạn đã tạo trước đó.Nhưng phần quan trọng là truy cập tùy chọn đã chọn từ phần tử chọn.
Câu lệnh trích xuất phần tử được tham chiếu hiện tại từ DOM, và hơn nữa, nó lấy giá trị dựa trên tương tác của người dùng.
4 and the form element. I hope it will help as you play around with the select element.1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
3
4class SimpleSelect extends Component {
5 onChangeColor[] {
6 console.log[event.target.value];
7 }
8
9 render[] {
10 return [
11
12 Simple select element of react-bootstrap
13
14 Select any color :
15
20 Red
21 Blue
22 Green
23 Black
24 Orange
25
26
27 ];
28 }
29}
30
31export default SimpleSelect;