如何在react-bootstrap中获取选择元素的值？

有几种方法可以在react-bootstrap中获取元素的值。其中一些将在下面讨论：

使用引用：获取元素更新值的第一种方法是使用引用。使用ref，我们获得元素的引用，并且可以在整个现有组件中访问其值。

import React, { Component } from "react";
import { Form } from "react-bootstrap";
  
class GeeksForGeeks extends Component {
    constructor() {
        super();
        this.myRef = React.createRef();
    }
    onButtonClick() {
        console.log(this.myRef.current.value);
    }
  
    render() {
        return (
            

                Select element of react-bootstrap
                

            Select color
                
                    Black
                    Amber
                    Purple
                    Magenta
                    White
                
                
                    Gfg color
                
            
        );
    }
}
  
export default GeeksForGeeks;

解释：
• 第一步是在React组件中创建Ref

  constructor() {
      super();
      this.myRef = React.createRef();
  }

• 接下来，使用添加的ref属性，实现react-bootstrap select元素，后跟之前创建的引用名称。

  render() {
          return (
            
  
              Select element of react-bootstrap
              
  
              Select color
              
                Black
                Amber
                Purple
                Magenta
          White
              
              Gfg color
            
      );
    }
  

• 该语句通过从DOM中提取当前引用的元素来访问select元素中的selected选项，然后获取值。

  onButtonClick() {
      console.log(this.myRef.current.value);
  }
  

使用表单控件：当select元素是form元素的一部分时，还可以使用form元素，通过使用附加到select元素的事件处理程序来获取select元素的值。

import React, { Component } from "react";
import { Form } from "react-bootstrap";
  
class GeeksForGeeks extends Component {
    onFormSubmit(event) {
        event.preventDefault();
        console.log("Color value is :", this.state.color);
    }
    onChangeColor() {
        this.setState({ color: event.target.value })
    }
    render() {
        return (
            

                Select element of react-bootstrap
                

                

                    
                        Select Color : 
                        
                            Black
                            Amber
                            Purple
                            Magenta
                            White
                        
                    
                    Gfg color
                
            
        );
    }
}
export default GeeksForGeeks;

说明：表单中使用了两个事件：

1. 用户单击“提交”按钮时，将使用this.onSubmitForm()方法提交表单。

   onFormSubmit(event) {
       event.preventDefault();
       console.log("Color value is :", this.state.color);
   }
   

2. this.onChangeColor()用于检查select元素的change事件

   onChangeColor() {
       this.setState({ color: event.target.value })
   }
   

当用户更改选择元素值时，它会更新为组件状态。

该方法被广泛使用，因为每个表单元素都保持其状态，并且一旦提交表单，就可以从状态中获取更新后的值。

输出：以下是上述代码示例的输出：

进一步处理：用户更改选择元素值后，它会更新为组件状态，并且相同的状态值会将数据发送到数据库进行处理。