Блог

У меня есть опции для множественного выбора реакции. Я могу создать новую и удалить старую опцию. Но когда я хочу использовать модальный с кнопкой отмены и удаления. у меня такая проблема TypeError: не удается прочитать свойство ‘preventDefault’ неопределенного. Мне нужно показать модальный элемент и с условиями удалить элемент или отменить модальный. Пытаюсь выполнить простое событие / функцию 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 amp;amp; domainList.length;
    //const numOfCourseTypes = Object.keys(courseTypeList).length;

    if (isError amp;amp; !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 amp;amp; 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 amp;amp;
    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>
    );
  }
}
  

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

  onRemoveMultipleType={this.onRemoveMultipleTypeDomains}
  

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

Я вижу, что вам нужны как значение, так и событие e. Есть 2 способа добиться этого :

Первый

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

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

Посмотрите, как выводится значение.