Javascript React/Redux表单元素和提交”；“未连接”；当父元素具有事件侦听器（onClick）时

我有一个

组件，如下所示：

import React, { Component } from "react";
import { connect } from "react-redux";
import { toggleModal, createTask } from "../../actions/project.js";

class TaskForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      input: "",
    };

    this.formInput = React.createRef();

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFocusInput = this.handleFocusInput.bind(this);
    this.handleBackdropClick = this.handleBackdropClick.bind(this);
  }

  componentDidMount() {
    this.handleFocusInput();
  }

  handleChange(e) {
    this.setState({ input: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.createTask(this.state.input);
    this.setState({ input: "" });
    this.props.toggleModal();
  }

  handleFocusInput(e) {
    this.formInput.current.focus();
  }

  handleBackdropClick() {
    this.props.toggleModal();
  }

  render() {
    return (
      <div className="task-form-container">
        <form
          style={formStyles}
          onSubmit={this.handleSubmit}
          autoComplete="off"
        >
          <label htmlFor="task">Task:</label>
          <input
            type="text"
            name="task"
            id="task"
            style={inputStyle}
            value={this.state.input}
            placeholder="Enter a new task"
            onChange={this.handleChange}
            ref={this.formInput}
          />
          <button type="submit" style={inputStyle}>
            Create
          </button>
        </form>
      </div>
    );
  }
}

export default connect(null, { toggleModal, createTask })(TaskForm);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“./../actions/project.js”导入{toggleModal，createTask}；
类TaskForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入：“，
};
this.formInput=React.createRef（）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleFocusInput=this.handleFocusInput.bind（this）；
this.handleBackdropClick=this.handleBackdropClick.bind（this）；
}
componentDidMount（）{
这个.handleFocusInput（）；
}
手变（e）{
this.setState（{input:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.createTask（this.state.input）；
this.setState（{input:：}）；
this.props.toggleModal（）；
}
手动聚焦输出（e）{
this.formInput.current.focus（）；
}
handleBackdropClick（）{
this.props.toggleModal（）；
}
render（）{
返回(
任务：
创造
);
}
}
导出默认连接（null，{toggleModal，createTask}）（TaskForm）；

该组件按预期工作。按enter键或用鼠标单击submit按钮时表单将提交然而当我试图在

上添加一个事件（作为表单/模式的背景）包装

时，如下所示：

<div className="task-form-container" onClick={this.handleBackdropClick}>

并尝试提交类似于上一个的内容，我在控制台中收到以下消息：

表单提交已取消，因为表单未连接

没有任何东西被提交，也没有新任务被创建，等等。但是形式和背景确实隐藏了自己

预期结果是能够查看表单/背景，能够像正常情况一样提交，并且能够单击背景以关闭表单/背景。当前它是一个或另一个（通过从父div中删除或添加

onClick={this.handleBackdropClick}

）

---

我找不到任何关于为什么这一微小更改会完全断开表单与应用程序/页面的连接的信息。

您是否尝试过

event.preventDefault（）

在你的

handleSubmit

函数中？@Anup是的，我在上面的handleSubmit（e）方法中有e.preventDefault（）。奇怪的是，只有当我将eventlistener添加到表单的父div时才会发生这种情况。