反应:获取自定义复选框的选中属性

Posted

技术标签:

【中文标题】反应:获取自定义复选框的选中属性【英文标题】:react: get custom checkbox's checked attribute 【发布时间】:2016-04-06 09:47:04 【问题描述】:

我想用复选框进行一些自定义,它可能看起来像这样:

所以我将我的自定义复选框包装到一个 React 组件中:

require('../../less/ck-checkbox.less');
var React = require('react');

var CkCheckbox = React.createClass(
  propTypes: 
    name: React.PropTypes.string,
    text: React.PropTypes.string,
    defaultChecked: React.PropTypes.bool,
    onChange: React.PropTypes.func
  ,
  getDefaultProps: function() 
    return 
      name: 'checkbox',
      text: '',
      defaultChecked: false,
      onChange: function () 
    ;
  ,
  render: function() 
    return (
      <div className="ck-checkbox">
        <label>
          <input
            type="checkbox"
            name=this.props.name
            ref="c"
            defaultChecked=this.props.defaultChecked
            onChange=this.props.onChange.bind(this, this.refs.c.checked)
          />
            <span className="icons">
              <span className="icon-checked-o icon-true"></span>
              <span className="icon-circle-o icon-false"></span>
            </span>
            this.props.text.length > 0 ?
              <span className="ck-checkbox-text">this.props.text</span> : null
            
          </label>
        </div>
      );
    
);

module.exports = CkCheckbox;

我的容器是这样的:

var React = require('react');

var CkCheckbox = require('./CkCheckbox.js');

var Test = React.createClass(
  render: function() 
    return (
      <div>
        <CkCheckbox onChange=this._handleChange/>
      </div>
    );
  ,

  _handleChange: function(checked, e) 
    console.log(checked)
  
);

module.exports = Test;

你可以看到,我尝试在onChange回调中绑定this.refs.c.checked,但是不起作用。

那么,如何在 _handleChange 函数的测试组件中获取我的自定义复选框的checked state

【问题讨论】:

【参考方案1】:

在这种情况下,您不需要使用 refs,因为您可以从 e 参数中获取已检查的属性

// CkCheckbox component
 <input type="checkbox" 
     name=this.props.name 
     defaultChecked=this.props.defaultChecked 
     onChange= this.props.onChange  />

// Test component
_handleChange: function(e) 
  var checked = e.target.checked;
  console.log(checked)

Example

或者如果你只想传递 checked 属性,你可以这样做

// CkCheckbox component
handleChange: function (e) 
  this.props.onChange(e.target.checked);
,

<input type="checkbox" 
   name=this.props.name 
   defaultChecked=this.props.defaultChecked 
   onChange= this.handleChange  />

// in Test component 
_handleChange: function(checked) 
  console.log(checked)

Example

【讨论】:

【参考方案2】:

这是一个简单的示例,您可以使用它来获取自定义值或复选框的值,以及检查该框是否被选中。

export default class SearchBoxContainer extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      boxAll: false
    ;
  

  handleChange = event => 
    this.setState( boxAll: event.target.checked , () => 
      console.log("This returned true or false", this.state.boxAll);
    );
  ;

  render() 
    return (
      <div className="search-container">
        <SearchBox />
        <div className="filter-country">
          <h1>Filter</h1>
          <div className="filter-country-container">
            <div>
              <input
                type="checkbox"
                id="checkBoxUS"
                name="US"
                value="US"
                onChange=this.handleChange
              />
              <label htmlFor="US">All Jobs</label>
            </div>
          </div>
        </div>
      </div>
    );
  

重要的是要知道,在这个例子中,我使用“setState()”回调只是为了演示目的,但你可以通过 props 或任何你喜欢的方法将值传递给其他组件。此外,当复选框被选中时,该值将返回“true”

【讨论】:

以上是关于反应:获取自定义复选框的选中属性的主要内容,如果未能解决你的问题,请参考以下文章

将 TableView 中的 CheckBox 选中状态绑定到自定义模型属性

如何在react中获取自定义属性的值

react 怎么获取自定义的属性值

复选框获取值(包括自定义属性),拼接成字符串

Jquery怎么获取select选中项 自定义属性的值

Jquery怎么获取select选中项 自定义属性的值