反应:获取自定义复选框的选中属性
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”
【讨论】:
以上是关于反应:获取自定义复选框的选中属性的主要内容,如果未能解决你的问题,请参考以下文章