reactjs - 如何将目标 url 地址传递给 react.js 中的表单？

Question

我的网站上有一个登录表单，它被设置为每次用户想要打开我网页上的任何资源时显示。

例如，当用户访问时，myweb.page/some/resource它会向他显示我的登录表单，然后 - 在提供凭据后 - 它应该将他重定向到请求的 url，其中包含 url 的附加j_security_check部分。到目前为止，这是我的代码：

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

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

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

  handleSubmit(event) {
    let target = "";
    let targetResource = getQueryVariable('resource');
    if (targetResource) {
        if (targetResource.substr(-1) === '/') {
            target = targetResource.substr(0, -1);
        } else {
            target = targetResource;
        }
    }
    alert(targetResource);
    this.state.target = targetResource
  }

  render() {
    return (
      <form onSubmit={ this.handleSubmit } action={this.state.target + "/j_security_check"} method="POST">
        <label>
          email:
          <input type="text" name="email" value={this.state.email} onChange={e=>this.handleChange(e)} />
        </label>
        <input type="hidden" name="resource" value={this.state.target + "/j_security_check"} />
        <label>
          passwords:
          <input type="password" name="password" value={this.state.password} onChange={e=>this.handleChange(e)} />
        </label>
        <input type="submit" value="Login" />
      </form>
    );
  }
}

function getQueryVariable(variable)
{
    var query = window.location.search.substring(1);
    console.log(query)
    var vars = query.split("&");
    console.log(vars)
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        console.log(pair);
        if(pair[0] == variable){
            return pair[1];
        }
    }
    return(false);
}

export default App;

在handleSubmit方法中有一个打印正确重定向路径的警报，例如：

%2Fcorrect%2Furl%2Faddress

但随后网页重新加载并重定向到：

http://localhost:8080/apps/myLoginForm/undefined/j_security_check

代替

http://localhost:8080/apps/myLoginForm/correct/url/address/j_security_check

为什么正确的重定向目标没有传递给表单中的url？谢谢！

标签： reactjs

Answer 1

原因可能是因为表单是在动作仍然存在时提交的， action={this.state.target + "/j_security_check"}这使得 is 'undefined/j_security_check'。

我建议event.preventDefault()在 handleSubmit 代码中使用，然后只执行数据调用，然后如果您在用户提交之前无法计算 URL，则之后重定向自己。如果您将 React 作为 SPA 使用，这也能更好地工作.

否则，如果计算耗时，只需在渲染或记忆函数中计算目标位置。这样，表单将具有正确的 url 发布到。

更新：

这是一个示例，说明如何将其放入渲染函数中，因为它不会执行太多工作。

编辑：添加decodeURIComponent()到 getTargetURL() 函数中，并删除了 this.handleSubmit 的其余部分，因为我很确定它不再需要了。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

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

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

  render() {
    const target = getTargetURL();
    return (
      <form
        action={target + '/j_security_check'}
        method="POST"
      >
        <label>
          email:
          <input
            type="text"
            name="email"
            value={this.state.email}
            onChange={(e) => this.handleChange(e)}
          />
        </label>
        <input
          type="hidden"
          name="resource"
          value={target + '/j_security_check'}
        />
        <label>
          passwords:
          <input
            type="password"
            name="password"
            value={this.state.password}
            onChange={(e) => this.handleChange(e)}
          />
        </label>
        <input type="submit" value="Login" />
      </form>
    );
  }
}

function getTargetURL() {
  let target;
  const targetResource = decodeURIComponent(getQueryVariable('resource'));
  if (targetResource) {
    if (targetResource.substr(-1) === '/') {
      target = targetResource.substr(0, -1);
    } else {
      target = targetResource;
    }
  }
  return target;
}

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  console.log(query);
  var vars = query.split('&');
  console.log(vars);
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split('=');
    console.log(pair);
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
}

export default App;