在 Meteor 中的 React 中忽略 event.preventDefault()

Question

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

这是我的 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>

        );
    }
}

Answer 1

preventDefault 是一个函数，所以你必须在它做任何事情之前调用它：

event.preventDefault();