我有一个映射函数,它将JSON值显示为复选框,我试图将这些值的子项添加为当前复选框下的复选框,并且它工作正常,但我现在要做的是让节目成为2个孩子单击父复选框后复选框。
我有Side Collection 1,在它下面有儿童(第1面和第2面),我尝试但不能做的是显示(侧面1和侧面2复选框)一次(侧面集合1复选框)被选中,复选框值作为道具从Checkbox.js传递到Itemlist.js,其中fetch / map发生。如果有人能够解释或证明如何实现这一点,那么会感激。
我已经在vanillajs中完成了我想要的功能,但我不知道如何将它添加到我的反应应用中,特别是在映射函数中,我是新的反应
功能片段:https://codepen.io/alaafm/pen/eXGZbO?editors=1010
React Live片段:https://codesandbox.io/embed/5w8vwwmn5p?fontsize=14
Checkbox.js
class Checkboxes extends React.Component {
constructor(props) {
super(props);
}
render() {
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"
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{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"
/>
<label
htmlFor={
this.props.childk + (item.name || item.description)
}
>
{item.name || item.description}{" "}
{/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
*/}
</label>
</div>
</div>
);
})}
</div>
</form>
);
}
}
export default Checkboxes;
Itemlist.js
...
<div>
{selectedMod &&
selectedMod.children &&
selectedMod.children.map((item, index) => (
<Checkboxes
key={index}
name={item.name || item.description}
myKey={index}
options={item.children}
childk={item.id}
limit={item.max}
/>
))}
</div>
...
我要添加的JS函数
const myCheck2 = document.getElementById("check2");
const dib = document.getElementById("dib");
function change() {
if (myCheck2.checked) {
dib.style.display = "block";
dib2.style.display = "block";
}
else{
dib.style.display = "none";
dib2.style.display = "none";
}
}
function func2() {
if (this.checked) {
myCheck2.checked = false;
dib.style.display = "none";
}
else {
dib.style.display = "block";
myCheck2.checked = true;
}
}
myCheck2.addEventListener('click', change);
您可以在Checkboxes.js和条件渲染中使用内部状态来显示子复选框。
import React from "react";
import "./Checkbox.css";
class Checkboxes extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false
}
}
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"
/>
<label
htmlFor={
this.props.childk + (item.name || item.description)
}
>
{item.name || item.description}{" "}
{/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
*/}
</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.setState({checked: !this.state.checked})
}}
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{this.state.checked ? input2Checkboxes : undefined }
</div>
</form>
);
}
}
export default Checkboxes;
您可以利用react组件状态和checkbox.js
组件。如果状态发生更改,则组件将使用正确的复选框重新呈现。
我建议使用一个布尔值的状态来知道是否选中了幻灯片集合复选框,并且让父复选框输入的onChange函数看起来像这样:
<input
id={this.props.childk + this.props.name}
name="checkbox"
type="checkbox"
onChange={()=> this.setState({parentCheckbox:!this.state.parentCheckbox})}
/>
然后在您通过this.props.options映射以渲染子复选框的方法中,您可以只为输入标记创建一个条件语句,只有在this.state.parentCheckbox
为true时才会呈现它 - 请参阅下面的方法。
render() {
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"
onChange={()=> this.setState({parentCheckbox:!this.state.parentCheckbox})}
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{this.props.options &&
this.props.options.map(item => {
return (
<div className="inputGroup2">
{" "}
<div className="inputGroup">
{ this.state.parentCheckbox && (<input
id={this.props.childk + (item.name || item.description)}
name="checkbox"
type="checkbox"
/>)}
<label
htmlFor={
this.props.childk + (item.name || item.description)
}
>
{item.name || item.description}{" "}
{/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
*/}
</label>
</div>
</div>
);
})}
</div>
</form>
);
}
}