reactjs - 如何控制反应路由器上的链接

Question

我正在尝试建立一个登录，我验证输入和数据，问题是当输入错误时我不知道如何禁用链接。我的意思是，当用户名和密码错误时，我不希望继续登录。

我可以禁用链接吗？或者我需要另一个解决方案我真的想不出另一个解决方案，希望你能帮助我。

import { Link } from 'react-router-dom';
class Index extends Component {
  state = {
    info: {
      email: '',
      password: ''
    },
    login: {
      email: '[e-mail]',
      password: '1234'
    }
  };

  updateInfo = e => {
    this.setState({
      info: { ...this.state.login, [e.target.name]: e.target.value }
    });
  };
  submit = e => {
    e.preventDefault();
    if (
      this.state.info.email === this.state.login.email &&
      this.state.info.password === this.state.login.password
    ) {
      console.log('true');
    } else {
      console.log('false');
    }
  };

  render() {
    return (
      <div className="text-center container mt-4" style={{ width: '50%' }}>
        <form className="px-4 py-3" onSubmit={this.submit}>
          <div className="form-group">
            <label>Email: </label>
            <input
              type="text"
              placeholder="[e-mail]"
              className="form-control"
              name="email"
              value={this.state.info.email}
              onChange={this.updateInfo}
            />
          </div>
          <div className="form-group">
            <label>Password: </label>
            <input
              type="text"
              placeholder="Password"
              className="form-control"
              name="password"
              value={this.state.info.password}
              onChange={this.updateInfo}
            />
          </div>
          <Link to="Profile">
            <button type="submit" className="btn btn-secondary mt-3">
              Sign in
            </button>
          </Link>
          <div>
            <Link to="/register" className="badge badge-light p-2 m-2">
              Register
            </Link>
          </div>
        </form>
      </div>
    );
  }
}

export default Index;

标签： reactjs

Answer 1

<button type="submit" className="btn btn-secondary mt-3">
          Sign in
</button>

您只需删除链接并保留按钮，然后在登录成功后即可使用：-

this.props.history.push('/Profile');

或从 'react-router-dom' 导入 { Redirect }

<Redirect to='/target' />