如何修复无法读取 React 中的属性“preventDefault”？

Question

我有关于 React 多选的选项。我可以创建新的和删除旧的选项。但是当我想使用带有取消和删除按钮的模式时。我有这个问题类型错误：无法读取未定义的属性“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 上传递任何东西，默认情况下它只是传递事件。

我看到你需要 value 和 Event e。有两种方法可以实现：

第一

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

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

看看价值是如何产生的。