如何從react-bootstrap復選框獲取值/屬性？

Question

我正在嘗試使用react-bootstrap復選框（ https://react-bootstrap.github.io/components.html#forms-controls ），我需要在更改狀態時觸發事件。 能夠以編程方式取消/檢查它和/或判斷它是否被檢查也是很好的。 不幸的是，當代碼被轉換並呈現​​時，它將輸入包裝在div中。

我怎樣才能在dom中找到它並操縱它？

我的代碼看起來類似於：

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;

瀏覽器渲染：

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

我在文檔中看到了inputRef prop，但是我找不到任何這樣的例子或讓它自己工作。

Answer 1

有兩種方式：React方式和不那么React方式。

React的方法是通過傳遞道具並通過附加事件處理程序來響應其狀態的變化來設置子組件的狀態。 對於Checkbox，這意味着設置checked和onChange道具。

請注意，在下面的例子中父組件（應用程序）如何跟蹤復選框的狀態，可以用兩種設置this.setState ，並查詢它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> 

不那么React的方法是獲取對呈現的DOM元素的引用並直接訪問其checked屬性。 我不推薦這個，因為它必然會用icky強制性代碼污染你可愛的功能性React代碼。 不過，使用React-Bootstrap可以通過設置inputRef prop來實現，如下例所示：

 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

謝謝你的上述答案。 我在給定組件中有多個復選框時稍微概括了上面的內容：

  constructor() {
    super();
    this.state = { YourInputName: false };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  render() {
    return (
      <div>
        <Checkbox
          name="YourInputName"
          onChange={this.handleCheckboxChange} />
      </div>
    );
  }

  handleCheckboxChange(event) {
    const target = event.target
    const checked = target.checked
    const name = target.name
    this.setState({
        [name]: checked,
    });
  }

Answer 3

您是否嘗試過將onChange屬性設置為復選框？

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

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