Простая функция для проверки флажков в ReactionJS - PullRequest
Новая
       19

Простая функция для проверки флажков в ReactionJS

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

Я сделал функцию предела выбора, которая гарантирует, что общий флажок выше минимального значения и ниже максимального значения, эти значения были взяты из 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

1 Ответ

4 голосов
/ 16 марта 2019

Ваш общий подход выглядит так, как будто он должен работать, просто нужно изящество для фактической реализации состояний ошибки.Однако здесь предлагается обновить ваше условие !isSelected && 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;
      }
    }
  }

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

...