當選中不工作的reactjs時，復選框會擴展另一個復選框

Question

我有一個映射函數，它將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);

Answer 1

您可以在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;

Answer 2

您可以利用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>
    );
  }
}