Cách lấy các giá trị/thuộc tính từ hộp kiểm phản ứng-bootstrap?

Question

Tôi đang cố gắng sử dụng hộp kiểm phản ứng-bootstrap (https://react-bootstrap.github.io/components.html#forms-controls) và tôi cần kích hoạt sự kiện khi nó thay đổi trạng thái. Nó cũng sẽ là tuyệt vời để có thể lập trình un/kiểm tra nó và/hoặc cho biết nếu nó được kiểm tra. Thật không may khi mã được transpiled và rendered nó kết thúc tốt đẹp đầu vào trong một div.

Làm cách nào tôi có thể tìm thấy điều này trong dom và thao tác?

Mã của tôi trông giống như sau:

import React, { PropTypes } from 'react'; 
import { Checkbox } from 'react-bootstrap'; 

const EditItem = (props) => { 

    return (
    <div> 
     <Checkbox style={{ marginLeft: '15px' }} >{props.itemLable}</Checkbox> 
    </div> 
); 
}; 

export default EditItem; 

Và trình duyệt render này:

... 
<div class="checkbox" style="margin-left: 15px;"> 
    <label> 
    <input type="checkbox"> 
    </label> 
</div> 
... 

tôi thấy prop inputRef trong tài liệu nhưng tôi không thể tìm thấy bất kỳ ví dụ của việc này hoặc làm cho nó hoạt động được.

Answer 1

Có hai cách: Cách phản ứng và cách không phản ứng.

Cách phản ứng là đặt trạng thái của thành phần con bằng cách truyền các đạo cụ và phản hồi các thay đổi trong trạng thái của nó bằng cách gắn trình xử lý sự kiện. Trong trường hợp Checkbox, điều đó có nghĩa là đặt các đạo cụ checked và onChange.

Lưu ý trong ví dụ dưới đây cách thành phần phụ huynh (Ứng dụng) theo dõi trạng thái của hộp kiểm và cả hai có thể đặt nó bằng this.setState và truy vấn nó bằng this.state.checkboxChecked.

const { Checkbox, Button } = ReactBootstrap; 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { checkboxChecked: false }; 
 
    this.handleChange = this.handleChange.bind(this); 
 
    this.handleIsItChecked = this.handleIsItChecked.bind(this); 
 
    this.handleToggle = this.handleToggle.bind(this); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <Checkbox 
 
      checked={this.state.checkboxChecked} 
 
      onChange={this.handleChange} /> 
 
     <Button type="button" onClick={this.handleToggle}>Toggle</Button> 
 
     <Button type="button" onClick={this.handleIsItChecked}>Is it checked?</Button> 
 
     </div> 
 
    ); 
 
    } 
 
    
 
    handleChange(evt) { 
 
    this.setState({ checkboxChecked: evt.target.checked }); 
 
    } 
 
    
 
    handleIsItChecked() { 
 
    console.log(this.state.checkboxChecked ? 'Yes' : 'No'); 
 
    } 
 
    
 
    handleToggle() { 
 
    this.setState({ checkboxChecked: !this.state.checkboxChecked }); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.querySelector('div'));

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.8/react-bootstrap.min.js"></script> 
 
<div></div>

Các không-để-Phản ứng cách là để có được một tham chiếu đến phần tử DOM trả lại và truy cập vào bất động sản checked của nó trực tiếp. Tôi không khuyên bạn nên điều này, bởi vì nó nhất thiết phải gây ô nhiễm mã React chức năng đáng yêu của bạn với mã bắt buộc icky. Tuy nhiên, với Phản ứng-Bootstrap bạn có thể làm điều đó bằng cách thiết lập inputRef prop, như trong ví dụ dưới đây:

const { Checkbox, Button } = ReactBootstrap; 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.handleIsItChecked = this.handleIsItChecked.bind(this); 
 
    this.handleToggle = this.handleToggle.bind(this); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <Checkbox 
 
      onChange={this.handleChange} 
 
      inputRef={ref => this.myCheckbox = ref} /> 
 
     <Button type="button" onClick={this.handleToggle}>Toggle</Button> 
 
     <Button type="button" onClick={this.handleIsItChecked}>Is it checked?</Button> 
 
     </div> 
 
    ); 
 
    } 
 
    
 
    handleIsItChecked() { 
 
    console.log(this.myCheckbox.checked ? 'Yes' : 'No'); 
 
    } 
 
    
 
    handleToggle() { 
 
    this.myCheckbox.checked = !this.myCheckbox.checked; 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.querySelector('div'));

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.8/react-bootstrap.min.js"></script> 
 
<div></div>

Answer 2

Bạn đã thử đặt thuộc tính onChange thành hộp kiểm của mình chưa?

handleChange(event) { 
    this.setState(*set checkbox state here*); 
} 

<Checkbox onChange={this.handleChange}></Checkbox>