Question

我对“反应多项选择”有一些选择。我可以创建新的和删除旧的选项。但是当我想使用模式与取消和删除按钮。我有此问题TypeError：无法读取未定义的属性'preventDefault'。我需要显示模式，并在有条件的情况下删除项目或取消模式。试图在ReactJS中做一个简单的onClick事件/函数。

单击按钮时，我想运行一个名为“ 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

正如Hardik指出的那样。在下面的行中：

 onRemoveMultipleType={this.onRemoveMultipleTypeDomains}

您不会在this.onRemoveMultipleTypeDomains上传递任何内容，默认情况下，它只会传递事件。

我看到您同时需要值和事件e。有两种方法可以实现：

第一

按如下所示将值传递给事件处理程序

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

第二

请参见下面的示例：

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

        data-value = "value"

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

现在请参见上方的数据值属性。现在，同时调用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 });
    }
  };

了解如何获得价值。

如何修复无法在React中读取属性'preventDefault'？

1 个答案: