react js + reactstrap + bootstrap-select

Question

我尝试使用react +引导+引导-选择。我已经成功地将select下拉菜单更改为bootstrap-select，但是没有触发click事件。

import React, { useEffect, useRef, createRef,forwardRef } from 'react';
import { Modal, ModalHeader, ModalBody, ModalFooter, Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import $ from 'jquery';
import 'bootstrap-select/dist/js/bootstrap-select.min.js';
import 'bootstrap-select/dist/css/bootstrap-select.min.css';

const AddPModal = ({ addPModalShow, hideModal }) => {

  const handleSelectPicker = ()=>{
    console.log($('#add_tag').selectpicker());
  }
    return (
      <Modal size="lg" isOpen={addPModalShow} centered={true} onOpened={handleSelectPicker}>
      <ModalHeader>Add New Prospect</ModalHeader>
      <ModalBody>
        <Form>
          <Row form>
            <Col md={6}>
              <FormGroup>
                <Label for="add_tag">tag</Label>
                <select name="tag" id="add_tag" className="form-control">
                  <option>1</option>
                  <option>2</option><option>3</option>
                </select>
              </FormGroup>
            </Col>
          </Row>
        </Form>
      </ModalBody>
      <ModalFooter>
        <Button color="primary">Save</Button>
        <Button color="secondary" onClick={hideModal}>Cancel</Button>
      </ModalFooter>
    </Modal>
    );
}

export default AddPModal;

Answer 1

...
<select name="tag" id="add_tag" className="form-control selectpicker">
    <option>1</option>
    <option>2</option><option>3</option>
</select>
...

将selectpicker类添加到您的select元素以自动初始化引导选择。有关更多信息，请访问click here