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

IT技术 javascript reactjs checkbox redux react-bootstrap
2021-05-09 14:10:05

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

3个回答

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

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

请注意在下面的示例中父组件（应用程序）如何跟踪复选框的状态，并且可以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，您可以通过设置inputRefprop 来实现，如下例所示：

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>

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

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

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

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

<Checkbox onChange={this.handleChange}></Checkbox>
其它你可能感兴趣的问题
上一篇react-test-renderer 的 create() 与 @testing-library/react 的 render() 下一篇nock 没有拦截我的请求