在复选框内部映射复选框ReactJS [英] Mapping checkboxes inside checkboxes ReactJS
问题描述
我有一个功能，一旦选中了主复选框，就会触发子复选框，并且所有这些复选框都是从JSON映射的.单击时将显示主要复选框(最高级别)及其下的所有子级复选框(第二级)，并且效果很好，我要显示的是单击时显示的主要复选框(第3级)的子级的子级第二级项目.
基本上是将所有三个订单显示在选中状态下，并将第三个订单添加到当前代码中，因此选项组显示选项，并在我要显示的是选项，它们是选项1 ，选项2 ，选项3 ，等等.>
复选框值作为道具从 Checkbox.js 传递到发生提取/映射的 Itemlist.js .
(P.S.我对每个部分都有选择限制，以防万一有人对选择过程感到困惑，这与该问题无关，可以忽略)
主要代码段: https://codesandbox.io/embed/6jykwp3x6n?fontsize=14
仅用于演示的第三级目标框: https://codesandbox.io/embed/o932z4yr6y?fontsize = 14 ，
Checkbox.js
import从反应"中反应；导入"./Checkbox.css"；Checkbox类扩展了React.Component {构造函数(道具){超级(道具);this.state = {currentData:0，限制:2检查:错误};}selectData(id，event){让isSelected = event.currentTarget.checked;如果(已选择){如果(this.state.currentData< this.props.max){this.setState({currentData:this.state.currentData + 1});} 别的 {event.preventDefault();event.currentTarget.checked = false;}} 别的 {如果(this.state.currentData> = this.props.min){this.setState({currentData:this.state.currentData-1});} 别的 {event.preventDefault();event.currentTarget.checked = true;}}}使成为() {const input2Checkboxes =this.props.options&&this.props.options.map(item => {返回 (< div className ="inputGroup2">{"}< div className ="inputGroup"><输入id = {this.props.childk +(item.name || item.description)}name =复选框"type ="checkbox"onChange = {this.selectData.bind(这，this.props.childk +(项目名称|| item.description))}/><标签htmlFor = {this.props.childk +(item.name || item.description)}}>{item.name ||商品描述}{" "}</label></div></div>);});返回 (< form className ="form">< div>{/**< h2> {this.props.title}</h2> */}< div className ="inputGroup"><输入id = {this.props.childk + this.props.name}name =复选框"type ="checkbox"已检查= {this.state.checked}onChange = {this.selectData.bind(这，this.props.childk + this.props.uniq)}onChange = {()=>{this.setState({已检查:！this.state.checked，currentData:0});}}/>< label htmlFor = {this.props.childk + this.props.name}>{this.props.name} {"}</label></div> {"}{this.state.checked吗?input2Checkboxes:未定义}</div></form>);}}导出默认复选框； Itemlist.js 映射功能发生的位置
...const selectedItem =selectedChild.children&&selectedChild.children.length?selectedChild.children [this.state.itemSelected]: 空值;...< div>{selectedItem&&selectedItem.children&&selectedItem.children.map((item，index)=>(<复选框键= {索引}名称= {item.name ||商品描述}myKey = {index}options = {item.children}childk = {item.id}max = {item.max}min = {item.min}/>))}</div>... 问题是递归的.显示选项组时，将显示组复选框及其选项.显示选项时，必须考虑它们的类型.
- 如果该选项是
成分，则可以显示一个简单的复选框. - 如果它是一个
group，则必须显示一个新的选项组及其选项，如上面所述.
这是您的代码中缺少的内容.这是一个工作沙箱，下面是解决方法:
在Checkbox.js中:
const input2Checkboxes =this.props.options&&this.props.options.map((item，index)=> {//选项是组"还是成分"?返回item.type ==="group"吗?({/*这是一个群组，因此以递归方式显示其选项*/}<复选框键= {索引}名称= {item.name ||商品描述}options = {item.children}childk = {this.props.childk}max = {item.max}min = {item.min}/>):({/*这是一种成分，因此显示一个简单的复选框*/}< div className ="inputGroup2"键= {item.name ||item.description}>{"}< div className ="inputGroup"><输入id = {this.props.childk +(item.name || item.description)}name =复选框"type ="checkbox"onChange = {this.selectData.bind(这，this.props.childk +(项目名称|| item.description))}/><标签htmlFor = {this.props.childk +(item.name || item.description)}}>{item.name ||商品描述}{" "}</label></div></div>);}); I have a function which triggers children checkboxes once main checkbox is checked, and all these checkboxes are mapped from JSON. The main checkboxes (Highest level) and all of its children checkboxes (2nd level) under them are shown on click and its working great, what I am trying to display is the children of those children of the main checkboxes (3rd level) on clicking the 2nd level items.
Basically to show all three orders under each other on check, and add the 3rd order to my current code, so Options Group shows Options, and under Options is what I want to show, which are Option 1, Option 2, option 3 and so on..
The checkbox values are passed as props from Checkbox.js to Itemlist.js where the fetch/map happens.
(P.S. I have selection limit on each section in case anyone got confused about the selection process, which is not relevant to this question and can be ignored)
Main Snippet : https://codesandbox.io/embed/6jykwp3x6n?fontsize=14
The 3rd level targeted boxes for demonstration only: https://codesandbox.io/embed/o932z4yr6y?fontsize=14 ,
Checkbox.js
import React from "react";
import "./Checkbox.css";
class Checkboxes extends React.Component {
constructor(props) {
super(props);
this.state = {
currentData: 0,
limit: 2,
checked: false
};
}
selectData(id, event) {
let isSelected = event.currentTarget.checked;
if (isSelected) {
if (this.state.currentData < this.props.max) {
this.setState({ currentData: this.state.currentData + 1 });
} else {
event.preventDefault();
event.currentTarget.checked = false;
}
} else {
if (this.state.currentData >= this.props.min) {
this.setState({ currentData: this.state.currentData - 1 });
} else {
event.preventDefault();
event.currentTarget.checked = true;
}
}
}
render() {
const input2Checkboxes =
this.props.options &&
this.props.options.map(item => {
return (
<div className="inputGroup2">
{" "}
<div className="inputGroup">
<input
id={this.props.childk + (item.name || item.description)}
name="checkbox"
type="checkbox"
onChange={this.selectData.bind(
this,
this.props.childk + (item.name || item.description)
)}
/>
<label
htmlFor={this.props.childk + (item.name || item.description)}
>
{item.name || item.description}{" "}
</label>
</div>
</div>
);
});
return (
<form className="form">
<div>
{/** <h2>{this.props.title}</h2>*/}
<div className="inputGroup">
<input
id={this.props.childk + this.props.name}
name="checkbox"
type="checkbox"
checked={this.state.checked}
onChange={this.selectData.bind(
this,
this.props.childk + this.props.uniq
)}
onChange={() => {
this.setState({
checked: !this.state.checked,
currentData: 0
});
}}
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{this.state.checked ? input2Checkboxes : undefined}
</div>
</form>
);
}
}
export default Checkboxes;
Itemlist.js Where the mapping function happen
...
const selectedItem =
selectedChild.children && selectedChild.children.length
? selectedChild.children[this.state.itemSelected]
: null;
...
<div>
{selectedItem &&
selectedItem.children &&
selectedItem.children.map((item, index) => (
<Checkboxes
key={index}
name={item.name || item.description}
myKey={index}
options={item.children}
childk={item.id}
max={item.max}
min={item.min}
/>
))}
</div>
...
The issue is a recursive one. When an options group is displayed, the group checkbox and its options are displayed. When displaying the options, their type has to be taken into account.
- If the option is an
ingredient, a simple checkbox can be displayed. - If it is a
group, a new options group has to be displayed with its options, like discribed above.
This is what is missing in your code. Here is a working sandbox and here is how you can fix it:
in Checkbox.js:
const input2Checkboxes =
this.props.options &&
this.props.options.map((item, index) => {
// Is the option a 'group' or an 'ingredient'?
return item.type === "group" ? (
{/* It's a group so display its options recursively */}
<Checkboxes
key={index}
name={item.name || item.description}
options={item.children}
childk={this.props.childk}
max={item.max}
min={item.min}
/>
) : (
{/* It's an ingredient so display a simple checkbox */}
<div className="inputGroup2" key={item.name || item.description}>
{" "}
<div className="inputGroup">
<input
id={this.props.childk + (item.name || item.description)}
name="checkbox"
type="checkbox"
onChange={this.selectData.bind(
this,
this.props.childk + (item.name || item.description)
)}
/>
<label
htmlFor={this.props.childk + (item.name || item.description)}
>
{item.name || item.description}{" "}
</label>
</div>
</div>
);
});
这篇关于在复选框内部映射复选框ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
