Question

我遇到网络连接速度较慢的问题。我在第一次加载时使用SSR加载HTML内容。所以，直到我的捆绑app js加载，没有事件处理程序工作。对于变通方法，我禁用了按钮并在 componentDidMount 中启用了该按钮。这工作正常但渲染将被调用两次。这是正确的方法还是可以更好的方式完成？

这是我的代码，

import React, { Component } from 'react';

class LogIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.',
      allowLogin: false
    };

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

  componentDidMount() {
    this.setState({ allowLogin: true });
  }

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

  handleSubmit(event) {
    alert('User name is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          User Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" disabled={!this.state.allowLogin}/>
      </form>
    );
  }
}

export default LogIn;

Answer 1

我面临着与客户端水合作用之前触发事件相同的问题。解决方法：

<iframe name="dummy_frame" className="dummy_frame" src="about:blank" />
<form onSubmit={handleSubmit} target="dummy_frame">
    .....
</form>

在css文件中：

.dummy_frame {
    display: none;
 }

Answer 2

@Yahel Yechieli的答案有效，但在幕后，它使用输入值触发GET请求。我认为禁用表单的本机事件会更好。

示例： index.html

  document.querySelectorAll('.SSRSubmit').forEach(function(element) {
    element.onsubmit = function(e) {
      e.preventDefault()
      return false;
  };});

App.ts

<form className="SSRSubmit"></form>

在捆绑的js文件加载

2 个答案: