我正在尝试确定何时在React中至少选中一个复选框。
我有一个复选框组件:
import * as React from 'react';
import * as DOM from 'react-dom';
import PropTypes from 'prop-types';
class Checkbox extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<label>
<input
type="checkbox"
name={this.props.value}
value={this.props.value}
onClick={this.props.function}
/>
<span>
<span>
{this.props.title}
</span>
</span>
</label>
</div>
);
}
}
Checkbox.PropTypes = {
title: PropTypes.string,
value: PropTypes.string,
function: PropTypes.func,
}
export default NewsletterCheckbox;
它被导入并在父组件中使用:
checkFields() {
// check if other fields are not empty and valid
console.log(this.state);
}
isCheckboxChecked(event) {
// determine if at least one checkbox is checked, and if so
// update state
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
if (checkedOne) {
this.setState({ checkboxValid: true }, this.checkFields);
} else {
this.setState({ checkboxValid: false }, this.checkFields);
}
}
const newsletterArray = NewsletterData.map((obj) => (
<div key={obj.value}>
<div>
<Checkbox
value={obj.value}
title={obj.title}
function={this.isCheckboxChecked}
/>
</div>
<p>
{obj.body}
<br />
<a onClick={(e) => {this.handleModal(e) }} data-iframe={obj.link}>
See Preview
</a>
</p>
</div>
));
我正在遇到的问题是,一旦选中一个字段,如果我取消选中该字段(或选中一堆,然后取消选中它们),则选中任何一个复选框isCheckboxChecked()
时运行的功能全部),它永远不会以假返回。
是否有更好的方法来检查React中是否至少选中了一个复选框而不查询DOM(这似乎无法与React渲染的复选框一起正常工作?]
您应保留已选中复选框的计数器
<input
type="checkbox"
name={this.props.value}
value={this.props.value}
onChange={this.props.onChange} />
constructor(props) {
super(props);
this.state = {checkCount: 0}
}
<Checkbox
value={obj.value}
title={obj.title}
onChange={(e) => {
if (e.target.checked)
this.setState((prevState) => {checkCount: prevState.checkCount + 1, checkboxValid: true})
else {
this.setState((prevState) => {checkCount: prevState.checkCount - 1}, () => {
if (this.state.checkCount === 0)
this.setState({checkboxValid: false})
})
}
}} />
如果用户选中或取消选中复选框,我们会将checkCount设置为+1或-1。如果他取消选中它,则在更新checkCount之后,我们需要验证this.state.checkCount === 0
,以便在条件有效时将checkboxValid
状态设置为false。