Как исправить Невозможно прочитать свойство 'protectDefault' в React?

Question

У меня есть опции для множественного выбора React.Я могу создать новый и удалить старый вариант.Но когда я хочу использовать модальные с кнопкой отмены и удаления.У меня есть эта проблема TypeError: Невозможно прочитать свойство 'protectDefault' из неопределенного.Мне нужно показать модальное и с условиями удалить элемент или отменить модальное.Пытаясь сделать простое событие / функцию onClick, в ReactJS.

Когда нажата кнопка, я хочу запустить функцию с именем "onClick", но я получаю эту ошибку в консоли: гуглил, но не уверенчто я иду не такЯ посмотрел на документацию ReactJs, и это выглядит правильно, но, очевидно, нет.Вот мой код:

onRemoveMultipleTypeDomains = (value, e) => {
    const { startDomainListRemove } = this.props;
    this.handleShow();
    e.preventDefault();
    if (this.handleClose()) {
      return null;
    } else {
      return startDomainListRemove({ value });
    }
  };

  onAddMultipleTypeCourseTypes = (newLabelArray, type) => {
    const { startCourseTypeListUpdate } = this.props;
    if (type === 'courseTypes') {
      return startCourseTypeListUpdate(newLabelArray);
    }
  };

  onRemoveMultipleTypeCourseTypes = value => {
    const { startCourseTypeListRemove } = this.props;
    startCourseTypeListRemove({ value });
  };

  handleClose = () => {
    this.setState({ isModalOpen: false });
  };

  handleShow = () => {
    this.setState({ isModalOpen: true });
  };

  render() {
    console.log(this.props);
    const {
      isLoading,
      domainList,
      isError,
      isLoaded,
      error,
      //id,
      courseTypeList,
    } = this.props;
    const pStyle = {
      fontFamily: 'Open sans',
      fontStyle: 'italic',
      color: '#777777',
      fontSize: '14px',
    };

    //const countOfDomains = domainList && domainList.length;
    //const numOfCourseTypes = Object.keys(courseTypeList).length;

    if (isError && !isLoading) {
      if (isStatus(error, 404)) {
        return <NoMatchPage />;
      }

      return (
        <Col>
          <Alert color="danger">Error while loading the data.</Alert>
        </Col>
      );
    }

    if (isLoading) {
      return <Loading />;
    }

    return (
      <div>
        <DetailPage>
          <Modal isOpen={this.state.isModalOpen}>
            <ModalHeader closeButton>
              Do you really want to delete this....
            </ModalHeader>
            <ModalBody>On this item is linked .... !</ModalBody>
            <ModalFooter>
              <Button color="secondary" onClick={this.handleClose}>
                Close
              </Button>
              <Button color="danger" onClick={this.startDomainListRemove}>
                Delete
              </Button>
            </ModalFooter>
          </Modal>
          <Row>
            <Col sm="4">
              <PageHeader title="Admin panel" />
              <p style={pStyle}>
                As an admin you can add and delete new types of domains, course
                types, locations, languages and project status.
              </p>
            </Col>
          </Row>
          <Row>
            <Col>
              <MultipleTypeSelect
                title="Client Domains"
                type="clientDomains"
                multipleTypeData={domainList}
                onAddMultipleType={this.onAddMultipleTypeDomains}
                onRemoveMultipleType={this.onRemoveMultipleTypeDomains}
                isMulti
              />
            </Col>
            <Col>
              <MultipleTypeSelect
                title="Course Types"
                type="courseTypes"
                multipleTypeData={courseTypeList}
                onAddMultipleType={this.onAddMultipleTypeCourseTypes}
                onRemoveMultipleType={this.onRemoveMultipleTypeCourseTypes}
                isMulti
              />
            </Col>
          </Row>
        </DetailPage>
      </div>
    );
  }
}

class MultipleTypeSelect extends Component {
  updateMultipleTypeOptionList = (options, current) => {
    const { multipleTypeData } = this.props;

    if (options.length > multipleTypeData.length) {
      const { onAddMultipleType, type } = this.props;

      const newMultipleTypeArray =
        options && options.filter(option => option.__isNew__);

      const newLabelArray = newMultipleTypeArray.map(type => type.label);

      return onAddMultipleType(newLabelArray, type);
    } else {
      const { onRemoveMultipleType } = this.props;
      const { removedValue } = current || {};
      const { value } = removedValue || {};

      const resultOfRemove = multipleTypeData.find(removedItem => {
        const { name } = removedItem || {};
        return name === value;
      });
      console.log(onRemoveMultipleType, '------');

      return onRemoveMultipleType(resultOfRemove);
    }
  };

  getModifiedMultipleTypeData = data =>
    data &&
    data.map(multipleType => ({
      value: multipleType.name,
      label: multipleType.name,
    }));

  render() {
    const { title, multipleTypeData, isMulti } = this.props;

    const multipleTypeOptionList = this.getModifiedMultipleTypeData(
      multipleTypeData,
    );

    return (
      <FormGroup>
        <h3>{title}</h3>
        <CreatableSelect
          defaultValue={multipleTypeOptionList}
          options={multipleTypeOptionList}
          onChange={this.updateMultipleTypeOptionList}
          isMulti={isMulti}
          isClearable={false}
        />
      </FormGroup>
    );
  }
}

Answer 1

Как отметил Хардик. В нижней строке:

 onRemoveMultipleType={this.onRemoveMultipleTypeDomains}

Вы ничего не передаете на this.onRemoveMultipleTypeDomains, и по умолчанию оно просто передает События.

Я вижу, что вам нужно и значение, и событие e. Это можно сделать двумя способами:

First

Передать значение в обработчик событий, как показано ниже

onRemoveMultipleType={this.onRemoveMultipleTypeDomains(this,'value')}

Второй

См. Пример ниже:

      <MultipleTypeSelect
        title="Client Domains"
        type="clientDomains"

        data-value = "value"

        multipleTypeData={domainList}
        onAddMultipleType={this.onAddMultipleTypeDomains}
        onRemoveMultipleType={this.onRemoveMultipleTypeDomains}
        isMulti
      />

Теперь смотрите атрибут data-value выше. Теперь при вызове onRemoveMultipleTypeDomains. Код должен быть как ниже:

onRemoveMultipleTypeDomains = (e) => {

    value = event.currentTarget.dataset.value

    const { startDomainListRemove } = this.props;
    this.handleShow();
    e.preventDefault();
    if (this.handleClose()) {
      return null;
    } else {
      return startDomainListRemove({ value });
    }
  };

Посмотрите, как получается значение.