如何从 react-bootstrap 复选框获取值/属性？

Posted 2023-03-05

【中文标题】如何从 react-bootstrap 复选框获取值/属性？

【英文标题】：How to get values/properties from a react-bootstrap checkbox?

【发布时间】：2017-07-29 16:11:18

【问题描述】：

我正在尝试使用 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 属性，但我找不到任何示例，也找不到它自己的工作。

【参考方案1】：

您是否尝试过为您的复选框设置 onChange 属性？

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


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

【讨论】：

在此处设置复选框状态 ?你怎么得到状态lol

【参考方案2】：

有两种方式：React 方式和非 React 方式。

React 的方式是通过传递 props 来设置子组件的状态，并通过附加事件处理程序来响应其状态的变化。对于 Checkbox，这意味着设置 checked 和 onChange 属性。

请注意以下示例中的父组件 (App) 如何跟踪 Checkbox 的状态，并且既可以使用 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 属性。我不推荐这样做，因为它必然会用讨厌的命令式代码污染你可爱的功能性 React 代码。不过，使用 React-Bootstrap，您可以通过设置 inputRef 属性来实现，如下例所示：

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>

【参考方案3】：

感谢以上回答。当给定组件中有多个复选框时，我稍微概括了上述内容：

  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,
    );