Sử dụng React với Bootstrap Chuyển đổi

Tôi muốn sử dụng bootstrap toggle bên trong một thành phần React. Tuy nhiên, hộp kiểm thông thường được hiển thị thay vì phần tử được tạo kiểu. Làm thế nào mà có thể được cố định?Sử dụng React với Bootstrap Chuyển đổi

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 

    <script src="https://fb.me/react-0.13.1.js"></script> 
    <script src="https://fb.me/JSXTransformer-0.13.1.js"></script> 
    <script type="text/jsx"> 
     var WordCheckBox = React.createClass({ 
      render: function() { 
       return (
        <div className="checkbox"> 
         <label> 
          <input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" /> 
          option1 
         </label> 
        </div> 
        ); 
      } 
     }); 
     React.render(
      <WordCheckBox />, 
      document.getElementById('content') 
     ); 
    </script> 

    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script> 
</head> 

<body> 
    <!--doesn't work. checkbox instead of toogle shown--> 
    <div id="content"> </div> 
    <!--works--> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off"> 
      <span>option2</span> 
     </label> 
    </div> 

    <!--works--> 
    <div class="checkbox" data-reactid=".0"> 
     <label data-reactid=".0.0"> 
      <input type="checkbox" data-toggle="toggle" 
        data-on="On" data-off="Off" 
        data-reactid=".0.0.0"> 
      <span data-reactid=".0.0.1">option3</span> 
     </label> 

    </div> 
</body> 
</html>

Nguồn

2015-04-14 Stas Kurilin

Hãy thử sử dụng Phản ứng Bootstrap: http://react-bootstrap.github.io/ – David

@ David tôi không thể yếu tố toogle đó. –

Từ khi xem bản trình diễn, có vẻ như mã thao túng DOM, có nghĩa là nó không dễ dàng tương thích với ReactJS như hiện được viết. – WiredPrairie

Dựa trên their docs

Bạn cần dây lên chức năng của plugin khi bạn Phản ứng gắn kết thành phần (khi nó spits ra HTML vào DOM)

Thêm một vòng đời móc componentDidMount và cung cấp cho các nhập thuộc tính ref để thực hiện việc này.

var WordCheckBox = React.createClass({ 

    componentDidMount: function() { 

     $(this.refs.toggleInput.getDOMNode()).bootstrapToggle(); 

    } 

    ... 

    render: function() { 

     ... 

     <input ref="toggleInput" type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" />

Nguồn

2015-04-14 21:11:36

Tôi đã tìm thấy giải pháp này không thành công khi gắn một trình xử lý sự kiện vào thành phần phản ứng. Có vẻ như 'bootstrapToggle' điều khiển DOM đủ để tạo hộp kiểm riêng của nó không gắn với hệ thống sự kiện phản ứng. Nếu tôi là đúng, sau đó một giải pháp hoàn chỉnh có thể là một viết lại của bootstrap chuyển đổi như là một thành phần reactjs. Nếu bạn chỉ dựa vào việc gửi biểu mẫu, thì câu trả lời này dường như hoạt động. –

Xin chào, tôi đang thử giải pháp và tôi gặp lỗi: 'Loại lỗi không hợp lệ: $ (...). BootstrapToggle không phải là hàm'. Làm cách nào để làm việc này? –

trên - Thiết lập chuyển đổi để 'Bật' nhà nước
tắt - Thiết lập chuyển đổi trạng thái 'Tắt'

componentDidMount: function() { 

    $(this.refs.toggleInput.getDOMNode()).bootstrapToggle('on'); 

}

Nguồn

2015-11-09 14:40:19 Marek

Nếu đầu vào của bạn được thêm vào tự động như nó là trường hợp đối với tôi, bạn sẽ muốn gọi hàm trong hàm componentDidUpdate.

Ngoài ra, sau đó bạn có thể nhận được dữ liệu đầu vào theo lớp thay vì thay đổi.

componentDidUpdate() 
{ 
    $('.toggleInput').bootstrapToggle(); 
}

Và hơn nữa:

<input className="toggleInput" type="checkbox" checked data-toggle="toggle">

Nguồn

2016-05-14 14:50:32

Sử dụng React với Bootstrap Chuyển đổi

Trả lời

Các vấn đề liên quan