Hướng dẫn form control select react-bootstrap - kiểm soát biểu mẫu chọn react-bootstrap

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
        
      

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

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
        
      

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

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

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

4.

Để 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ó.

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

1<Form.Control
2    as="select"
3    custom
4    onChange={this.onChangeColor.bind(this)}
5>

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

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
        
      

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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.

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.

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

1render() {
2    return (
3      <div>
4        Simple select element of react-bootstrap
5        <hr />
6        Select any color :
7        <Form.Control
8          as="select"
9          custom
10          ref={this.myRef}
11        >
12          <option value="red">Redoption>
13          <option value="blue">Blueoption>
14          <option value="green">Greenoption>
15          <option value="black">Blackoption>
16          <option value="orange">Orangeoption>
17        Form.Control>
18        <button onClick={this.onButtonClick}>Get colorbutton>
19      div>
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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

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.

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
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      <div>
4        Simple select element of react-bootstrap
5        <hr />
6        <Form onSubmit={this.onFormSubmit.bind(this)} role="form">
7          <Form.Group controlId="exampleForm.SelectCustom">
8            <Form.Label>Select Color : Form.Label>
9            <Form.Control as="select" custom onChange={this.onChangeColor.bind(this)}>
10              <option value="red">Redoption>
11              <option value="blue">Blueoption>
12              <option value="green">Greenoption>
13              <option value="black">Blackoption>
14              <option value="orange">Orangeoption>
15            Form.Control>
16          Form.Group>
17          <Button type="submit">Submit formButton>
18        Form>
19      div>
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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

1<Form.Control
2    as="select"
3    custom
4    onChange={this.onChangeColor.bind(this)}
5>

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;

1<Form.Control
2    as="select"
3    custom
4    onChange={this.onChangeColor.bind(this)}
5>

    
        Select Norm Type
         {
            console.log("e.target.value", e.target.value);
            setType(e.target.value);
          }}
        >
          Dictamen
          Constancia
          Complemento
        
      

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      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Redoption>
21          <option value="blue">Blueoption>
22          <option value="green">Greenoption>
23          <option value="black">Blackoption>
24          <option value="orange">Orangeoption>
25        Form.Control>
26      div>
27    );
28  }
29}
30
31export default SimpleSelect;