选择限制功能不适用于复选框形式reactjs [英] selection limit function not working on checkbox form reactjs
问题描述
我有一个react组件,它可以从json中获取复选框,该复选框的每个部分最多可以包含5个复选框,我正在尝试将每个部分的限制设置为最多2个选择,但是它不能正常工作,主要组件是 itemlist.js ,复选框来自 checkbox.js ,这是我要执行的操作的实时摘录,
I have a react component that checkboxes fetched from json, each section of the checkbox can contain up to 5 checkboxes, i am trying to set the limit in each section to maximum of 2 selections, however it is not working as it should, the main component is itemlist.js, and the checkboxes come from checkbox.js, here is a live snippet of what i am trying to do, https://codesandbox.io/embed/84lo55n689?fontsize=14, the changes are made in checkbox.js, I commented out the function and it changes for demonstration, since it makes the app crash.
Checkbox.js
import React from "react";
import "./Checkbox.css";
/* class Checkboxes extends React.Component {
constructor(props) {
super(props);
this.state = {
currentData: [],
limit: 2
}}
componentDidMount() {
selectData(id, event){
let isSelected = event.currentTarget.checked;
if (isSelected) {
if (this.state.currentData.length < this.state.limit) {
this.setState({ currentData: [...currentData, id] })
}
}
else {
this.setState({
currentData:
this.state.currentData.filter((item) => id !== item)
})
}
}}
render() { */
const Checkboxes = props => {
const id = /*this.*/ props.childId + /*this.*/ props.childp;
return (
<form className="form">
<div>
<h2>{/*this.*/ props.title}</h2>
{/*this.*/ props.options &&
/*this.*/ props.options.map(item => {
return (
<div className="inputGroup">
<input
id={id + item.name}
name="checkbox"
type="checkbox"
// checked={this.state.currentData.indexOf(id + item.name) >= 0}
// onChange={this.selectData.bind(this, id + item.name)}
/>
<label htmlFor={id + item.name}>{item.name} </label>
</div>
);
})}
</div>
</form>
);
}; //}}
export default Checkboxes;
Itemlist.js
...
<Checkboxes
key={index}
title={item.name}
myKey={index}
options={item.children}
childk={item.id}
/>
...
推荐答案
无需知道全局中是否检查了哪个元素
No needs to know which element is checked or not in global,
首先在this.state中将currentData更改为0
First change currentData to 0 in this.state
constructor(props) {
super(props);
this.state = {
currentData: 0,
limit: 2
};
}
然后更改selectData函数
Then change selectData function
selectData(id, event) {
let isSelected = event.currentTarget.checked;
if (isSelected) {
if (this.state.currentData < this.state.limit) {
this.setState({ currentData: this.state.currentData+1 });
}else{
event.preventDefault()
event.currentTarget.checked = false;
}
} else {
this.setState({currentData: this.state.currentData - 1});
}
}
并从输入中删除选中的属性(页面加载为0时)
And remove checked attribute from input (when page load is 0) ´
<div className="inputGroup">
<input
id={id + item.name}
name="checkbox"
type="checkbox"
onChange={this.selectData.bind(this, id + item.name)}
/>
<label htmlFor={id + item.name}>{item.name} </label>
</div>
https://codesandbox.io/s/j4yyx9v6l5?fontsize=14
这篇关于选择限制功能不适用于复选框形式reactjs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!