Блог

Я создал функцию ограничения выбора, которая гарантирует, что общий флажок выше минимального значения и ниже максимального значения, эти значения были взяты из JSON, из которого сопоставлены флажки, теперь ограничение выбора работает, но я пытаюсь добавить проверку для отображения предупреждений с помощью onblur, но я не уверен, как можно преобразовать ту же функцию в функцию проверки onblur. например, если кто-то снимает флажок, на консоли отображается, что вам нужно выбрать минимум 3, пока не будет установлено значение 3, по той же логике, что и selectData().

Функция

   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;
      }
    }
  }
  

Полный код:https://codesandbox.io/embed/48o2jo2500?fontsize=14

Ваш общий подход, похоже, должен сработать, просто нужна утонченность для фактической реализации состояний ошибки. Однако здесь было бы предложено обновить ваше !isSelected amp;amp; this.state.currentData < this.props.min условие, чтобы можно было выбрать менее трех, но отображать пользователю состояние ошибки.

   ...
    } else {
      if (this.state.currentData >= this.props.min) {
        // this.setState({ currentData: this.state.currentData - 1 });
        // UPDATE:
        this.setState((state) => ({ currentData: state.currentData - 1 }));
      } else {
        event.preventDefault();
        // Don't force the box to be selected, show error state instead
        // Disable calls to filtering, sorting, etc. until error resolved
        // event.currentTarget.checked = true;
      }
    }
  }
  

Базовая реализация:

• Ванильный JavaScript: https://codepen.io/hollyos/pen/XGqryV
• Реагировать:https://codepen.io/hollyos/pen/EMpXdR