我想确定何时在React中至少选中一个复选框。
我有一个Checkbox组件:
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。
onChange处理程序的第一个条件将引发错误。我假设它需要像其他条件一样包裹在箭头功能中?无论哪种方式,这些似乎都不会更新两个值(checkCount或checkboxValid)的状态。
我编辑的答案(忘一些
()
:{checkCount: prevState.checkCount - 1}
=>({checkCount: prevState.checkCount - 1})
)。您可以在此处查看实时版本:codesandbox.io/s/angry-aryabhata-ub2qn