[英]ReactJS: Uncheck previously checked checkbox when another checkbox is checked
[英]Checkbox expands another checkboxes when checked not working reactjs
我有一个映射函数,它将JSON值显示为复选框,我试图将这些值的子项添加为当前复选框下的复选框,并且它工作正常,但我现在要做的是让节目成为2个孩子单击父复选框后复选框。
我有Side Collection 1,在它下面有孩子(第1面和第2面),我尝试但不能做的是显示(第1侧和第2侧复选框)一次(Side Collection 1复选框)被选中,复选框值作为道具从Checkbox.js传递到Itemlist.js ,其中fetch / map发生。 如果有人能够解释或证明如何实现这一点,那么会感激。
我已经在vanillajs中完成了我想要的功能,但我不知道如何将它添加到我的反应应用中,特别是在映射函数中,我是新的反应
功能片段: https : //codepen.io/alaafm/pen/eXGZbO? edit = 1010
React Live Snippet: https ://codesandbox.io/embed/5w8vwwmn5p ? fontize = 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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.