验证反应选择

Question

我是新来的反应者，并且正在使用react-select来选择各个部门。我试图验证选择下拉列表，以便如果选择下拉列表为空，则会给出错误消息。我不确定该怎么做。但是这是我在做什么：

正在发生的事情是它正在验证空白字段，但是当我添加值时我无法继续前进

这是我正在使用的react-select的代码。

    class MultiSelect2 extends Component {
      state = {
        selectedOptions: []
      };
      handleChangeField = selectedOptions => {
        this.setState({ selectedOptions });
      };
      render() {
        const { selectedOption } = this.state;
        return (
          <div className="container">
            <div className="row">
              <div className="col-md-2"></div>
              <div className="col-md-8">
                <span>Select Department</span>
                <Select
                  id="Departments"
                  value={selectedOption}
                  options={Departments}
                  onChange={this.handleChangeField}
                  isMulti
                />
                {this.state.selectedOptions.map(o => (
                  <p>{o.value}</p>
                ))}
              </div>
              <div className="col-md-4"></div>
            </div>
          </div>
        );
      }
    }

    export default MultiSelect2;


Here is the code where I am calling Multiselect2:

    state = {
    rows: [],
    idx: [],
    selectedOptions: []
  };
  handleChangeField = selectedOptions => {
    this.setState({ selectedOptions });


     };
      continue = e => {
        if (this.state.selectedOptions.length < 1) {
          document.getElementById("departments").style.visibility = "visible";
          document.getElementById("Departments").style.border = "1px solid red";
        } else {
          e.preventDefault();
          this.props.nextStep();
        }
      };

        render() {
            const { values, handleChange } = this.props;

        <Grid container>
                    <Grid item xs={6}>
                      <MultiSelect2 style={{ width: "80%" }} id="Departments" />
                      <label
                        id="departments"
                        style={{ visibility: "hidden", color: "red" }}
                      >
                        Select Applicable departments
                      </label>
                    </Grid>
                    <Grid item xs={6}>

How do I validate the following using simple javascript? Is there another way to validate this. Are the elements not going into my array?