Не удается повторно использовать функции-флажки в ReactJS - PullRequest
Новая
       23

Не удается повторно использовать функции-флажки в ReactJS

2 голосов
/ 14 марта 2019

У меня есть функция отображения, которая отображает значения JSON в флажки, каждый флажок вызывает еще 2 флажка, у используемого мной JSON есть значение min / max, для которого я сделал функцию, чтобы установить min / max для выбора флажков в каждом разделеобе функции работают нормально.Проблема, однако, заключается в том, что после того, как родительский флажок установлен, и он расширяется, чтобы отобразить 2 функциональных флажка, я повторяю процесс, в котором я щелкаю его, чтобы уменьшить его, и нажимаю его снова, чтобы развернуть, дочерние флажки перестают быть активными.

Значения флажков передаются как реквизиты от Checkbox.js до Itemlist.js , где происходит выборка / отображение.Буду признателен, если кто-нибудь сможет объяснить или продемонстрировать, как этого можно достичь.

Реагирует на сниппет Live: https://codesandbox.io/embed/oo059p7q19?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}{" "}
                {/** <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.selectData.bind(
                this,
                this.props.childk + this.props.uniq
              )}
              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;

1 Ответ

0 голосов
/ 14 марта 2019

Я отладил твой код. Вы не устанавливаете State в компоненте Checkbox. Взгляните на метод selectData. Условия: 

this.state.currentData < this.props.max

и 

this.state.currentData > this.props.min

Условия являются истинными только один раз, потому что свойства min и max слишком малы (1, когда я отлаживал), поэтому условия всегда ложны после первого выбора.

Подходящие решения:

  1. Удалить

event.preventDefault(); event.currentTarget.checked = true; в остальных отчетах (вход является неуправляемым компонентом)

  1. Позвоните setState в остальных отчетах.
...