Проверка для реакции-выбора - PullRequest
Новая
       69

Проверка для реакции-выбора

0 голосов
/ 19 июня 2020

Я новичок в реакции и использую response-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?
...