Javascript event.preventDefault（）在Meteor中的React中被忽略

我正在构建一个应用程序，其中我使用Meteor中的提交表单与React。我使用event.preventDefault（），但每次按下submit按钮时，页面仍会重新加载，经过短暂的延迟，并返回到应用程序的第一个状态（主屏幕视图）

以下是我的handleSubmit函数：

showSaveDialog(event) {
    event.preventDefault;
    console.log("Show save dialog");
}

以下是整个组件：

export default class EditForm extends Component {

    constructor(props) {
        super(props);

        if(!this.props.form) {
            this.state = {
              modalShowing: false,
              target: null,
            };
        } else {
            this.state = {
              modalShowing: false,
              target: null,
            };
        }

    }

    toggleModal() {

        if (this.state.modalShowing == false) {
          this.setState({
            modalShowing: true,
          });
        } else {
          this.setState({
            modalShowing: false,
          });
        }
    }

    showSaveDialog(event) {
      event.preventDefault;
      console.log("Show save dialog");

      this.toggleModal();
    }

    saveForm() {
      var options = [];

      //if form doesn't yet exist
      if(! this.props.form) {
          this.props.saveForm( event.target[0].value, options);
      } else {
          this.props.saveForm( this.props.form._id, options);
      }

      this.toggleModal();
    }

    delete(event) {
      event.preventDefault;
      Meteor.call('forms.remove', this.props.form._id);
    }

    render() {
        return (
          <div className="">
            <form id="id_saveForm" onSubmit={ this.showSaveDialog.bind(this) }>
              <div>
              <div className="p-2">
                <button type="button" className="ml-4 bg-white hover:bg-gray-200 text-black font-bold text-sm px-4 py-2 rounded-sm cursor-pointer rounded-sm" onClick={() => this.props.toggleSubpage("NewForm")}>New Form</button>
                <button type="submit" className="ml-4 bg-white hover:bg-gray-200 text-black font-bold text-sm px-4 py-2 rounded-sm cursor-pointer rounded-sm">Save Form</button>
              </div>
              <div className="px-8">
                <div>
                  <table className="table-spacing">
                  <thead>
                    <tr>
                      <th className="header-width-50 border-b-2 border-black"></th>
                      <th className="header-width-50 border-b-2 border-black"></th>
                      <th className="header-width-250 border-b-2 border-black">Field Name</th>
                      <th className="header-width-200 border-b-2 border-black">Type</th>
                      <th className="header-width-250 border-b-2 border-black">Description</th>
                      <th className="header-width-100 border-b-2 border-black">Required?</th>
                      <th className="header-width-100 border-b-2 border-black">Choices</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td className="p-1 border-l border-r border-gray-300 text-center">
                          <div><img className="svg-icon cursor-pointer align-middle" viewBox="0 0 30 30" src="images/svgs/trash-simple.svg" onClick={() => this.delete} /></div>
                      </td>
                      <td className="p-1 border-r border-gray-300"></td>
                      <td className="p-1 border-r border-gray-300">
                        <input className="p-2" type="text" placeholder="(required)" autoComplete="off" />
                      </td>
                      <td className="p-1 border-r border-gray-300">
                        <select className="p-2">
                          <option value="string">Single-line text</option>
                          <option value="string">Number</option>
                          <option value="string">Yes/No</option>
                          <option value="string">Multi-line text</option>
                          <option value="string">Dropdown</option>
                          <option value="string">Currency</option>
                        </select>
                      </td>
                      <td className="p-1 border-r border-gray-300">
                        <input className="p-2" type="text" placeholder="(optional)" autoComplete="off" />
                      </td>
                      <td className="p-1 border-r border-gray-300 text-center">
                        <input className="p-2 align-middle" type="checkbox" onChange={() => this.setRole} checked={this.state.admin} />
                      </td>
                      <td className="p-1 border-r border-gray-300">  
                        <div>A,B,C</div>
                      </td>
                    </tr>
                  </tbody>
                  </table>

                </div>
              </div>
              </div>
            </form>


            {this.state.modalShowing &&
              <div id="id_saveTemplateModal" className="fixed inset-0 z-50 overflow-hidden bg-transblue flex">
                  <div className="relative bg-gray-paper w-full max-w-md m-auto flex-col rounded">
                    <div className="modal-content">
                      <div className="flex justify-between bg-gray-800 font-opensans tracking-widest px-4 py-2">
                        <h4 className="" id="id_saveTemplate" className="text-white font-bold text-sm">SAVE FORM</h4>
                        <button type="button" className="text-gray-500 hover:text-white" aria-label="Close" onClick={() => this.toggleModal() }><span className="" aria-hidden="true">&times;</span></button>
                      </div>
                      <form id="id_saveTemplateForm" onSubmit={() => this.saveForm() }>
                        <div className="modal-body flex flex-col p-4">
                          <div className="mb-2">
                            <label className="input-label-long text-right mb-2 pr-1 inline-block" htmlFor="templateName">Form Name</label>
                            <input className="input-box-short text-black border border-gray-400 rounded-sm py-2 px-3 ml-2 mb-1" type="text" name="templateName" required />
                          </div>
                          <div className="mb-2 flex justify-end">
                            <button type="button" className="bg-white border border-gray-400 hover:border-2 text-black text-xs font-bold ml-2 p-2 rounded-sm cursor-pointer rounded-full" onClick={() => this.toggleModal() }>Cancel</button>
                            <button type="submit" className="bg-blue-700 hover:bg-blue-800 text-white text-xs font-bold ml-2 p-2 rounded-sm cursor-pointer rounded-full">&#10003; Save</button>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
              </div>
            }
          </div>

        );
    }
}

导出默认类EditForm扩展组件{
建造师（道具）{
超级（道具）；
如果（！this.props.form）{
此.state={
莫达尔秀：错，
目标：空，
};
}否则{
此.state={
莫达尔秀：错，
目标：空，
};
}
}
toggleModal（）{
if（this.state.modalShowing==false）{
这是我的国家({
莫达尔秀：没错，
});
}否则{
这是我的国家({
莫达尔秀：错，
});
}
}
showSaveDialog（事件）{
违约事件；
log（“显示保存对话框”）；
this.toggleModal（）；
}
存储格式（）{
var期权=[]；
//如果表单还不存在
如果（！this.props.form）{
this.props.saveForm（event.target[0]。值，选项）；
}否则{
this.props.saveForm（this.props.form.\u id，选项）；
}
this.toggleModal（）；
}
删除（事件）{
违约事件；
Meteor.call（'forms.remove'，this.props.form.\u id）；
}
render（）{
返回(
this.props.toggleSubpage（“NewForm”）}>NewForm
保存形式
字段名
类型
描述
必修的？
选择
this.delete}/>
单行文本
数
是/否
多行文字
下拉列表
通货
this.setRole}checked={this.state.admin}/>
A、 B，C
{this.state.modalShowing&&
保存形式
this.toggleModal（）}>&次；
this.saveForm（）}>
表格名称
this.toggleModal（）}>取消
✓；保存
}
);
}
}

是一个函数，因此您必须在它执行任何操作之前调用它：

event.preventDefault();

---

谢谢你--我真的错过了括号不在的地方。它只是吸引了别人的目光。然而，我希望它能简单地出错——它只是忽略调用，就好像我正确地调用了某个东西而什么也不做一样；如果您只是在访问某个属性而不是对其进行操作，它会警告您。@LukeWaltman:您单击答案旁边的复选标记形状（是的，可能不是最直观的事情）