Jak uzyskać wartości/właściwości z pola wyboru reakcji na bootstrap?

Question

Próbuję użyć pola wyboru reakcji-bootstrap (https://react-bootstrap.github.io/components.html#forms-controls) i muszę wywołać zdarzenie, gdy zmienia stan. Byłoby również wspaniale móc programowo go usunąć/sprawdzić i/lub stwierdzić, czy jest sprawdzany. Niestety, gdy kod jest transponowany i renderowany, opakowuje dane wejściowe w div.

Jak mogę znaleźć to w domenie i nim manipulować?

Mój kod wygląda podobnie do tego:

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; 

a przeglądarka renderuje to:

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

widzę rekwizyt inputRef w dokumentacji, ale nie mogę znaleźć żadnych przykładów tego czy zmusić go do pracy.

Answer 1

Istnieją dwa sposoby: React Way i nie tak React sposób.

Sposób reagowania polega na ustawianiu stanu komponentu potomnego poprzez przekazywanie jego podpór i reagowanie na zmiany w jego stanie poprzez dołączanie procedur obsługi zdarzeń. W przypadku Checkbox oznacza to ustawienie rekwizytów checked i onChange.

Uwaga w poniższym przykładzie, w jaki sposób komponent macierzysty (aplikacja) śledzi stan pola Checkbox i może ustawić go na wartość this.setState i wysłać zapytanie do niego za pomocą 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>

Droga nie-tak-React jest, aby odniesienie do wydanego elementu DOM i uzyskać dostęp do jego checked się bezpośrednio. Nie polecam tego, ponieważ koniecznie zanieczyszcza twój piękny funkcjonalny kod React z icky imperatywnym kodem. Niemniej jednak, z React-Bootstrap można to zrobić poprzez ustawienie inputRef rekwizyt, jak w poniższym przykładzie:

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

Czy próbowałeś ustawić właściwość onChange w swoim polu wyboru?

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

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