提交密码后如何渲染组件？

Question

我的 react 单页 Web 应用程序中有组件需要密码才能查看。单击 's 后，将呈现密码表单组件。我编写了逻辑来检查密码是否正确。如果正确，那我该如何离开密码表单组件，并渲染链接最初指向的组件？

我只是尝试切换可见性，但我想我对如何在密码正确的情况下专门使用 React Router 渲染组件感到困惑

父组件

 handleClick = (e) => { 
e.preventDefault();
this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
}


render() {


    return (
        <div className="BigNames">
            <Link onClick={this.handleClick} className="BigNames-link" to='/Adobe' style={{textDecoration:'none'}}>
                <span className='Name'>Adobe Creative Cloud</span>
                <span className='Text'>: App Banner</span>  <i className="fas fa-lock"></i>
            </Link>

密码组件

import React, { Component } from 'react';
import './Password.css';
import Adobe from './Big Work/Adobe';


export default class Password extends Component {

static defaultProps = {
  password: 'pierpoint'
}

constructor(props) {
    super(props)

    this.state = {
      visible: true,
      value: ''
    }



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


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


    handleSubmit(e) {
      e.preventDefault();
      if(this.state.value === this.props.password) {
        alert('Correct!');
        this.setState({visible: false});
        return( <Adobe />)
      } else (alert('Incorrect Password!'))
  }

  handleClick(event) {
    event.preventDefault()
    this.setState(prevState => ({
      visible: !prevState.visible,
    }))
  }


render() {
    if (!this.state.visible) {
    return null
}

    return (
        <div className="pwd">

            <div className="enter-pwd">
            <button className='exit' onClick={this.handleClick}> &#10005; </button>
                <form onSubmit={this.handleSubmit}>

                <input 
                 className="sub-text"
                 type='password'
                 name='password' 
                 placeholder='Enter password' 
                 value={this.state.value}
                 onChange={this.handleChange}>
                 </input>
                 <button
                 className="sub-mit"
                 type='submit'>
                   submit
                 </button>

                </form> 
            </div>

        </div>
    )
}
}

在提交正确的密码后，密码组件确实消失了，但是以下条件组件不会呈现。s

Answer 1

有几种方法可以处理它。您可以将受保护的路由与react-router 一起使用，或者在简单的情况下，您可以：

   class App extends Component {
     state = {
       isAuthenticated: false,
     }

   setIsAuthenticated = (bool) => {
     this.setState({isAuthenticated: bool}) 
  }
   render(){
   const { isAuthenticated } = this.state;

   return(
    if(isAuthenticated){
     return <YourMainComponent />
   )
   return <AuthFormComponent setIsAuthenticated={this.setIsAuthenticated} />
  }
}

这只是一个例子，但我希望它能给你一个关于如何处理它的提示。

Answer 2

这里没有大量的代码来给出一个合适的例子，但是在伪代码中你会想要做这样的事情：

<div>
  {isPasswordVerified 
    ? <ComponentYouWantToShow />
    : <Password callbackProp={setIsPasswordVerified} />
  }
</div>

Password 组件需要一个回调 prop 将验证是否成功发送给父组件。然后在父组件中可以有条件地渲染相应的组件。无需在此处处理路由。

Answer 3

这是显示完整示例的代码笔：Hidden by password page

在我的示例中，隐藏页面是我称为 SecretPage 的组件，处理密码的表单称为 Password。父组件是App。

因为我需要在App内部知道密码是否正确，所以第一步是让Password成为一个受控组件。

function Password(props){
  return (
  <div>
    <p>Maybe the secret is a potato ?</p>
    <form onSubmit={props.onSubmit}>
      <input type='password' value={props.password} onChange={props.onChange}/>
      <input type='submit' value='submit'/>
    </form>
  </div>);
}

这意味着简单地说，onSubmit、onChange 和密码输入的值本身都是作为 props 给出的，由 App 处理，而不是由 Password 本身处理。 这是在 App 函数中调用密码的方式

<Password password={this.state.password} onChange={this.handleChange} onSubmit={this.handleSubmit} />

每当提交表单时，都会调用 App 中的函数 handleSubmit，如下所示：

  handleSubmit(e){
    e.preventDefault();
    this.setState({
      secretVisible : this.checkPassword(this.state.password),
    });
  }

因为 secretVisible 现在是 App 的一个状态，知道它应该显示哪个页面真的很容易。它只需要检查 this.state.secretVisible。

  render(){
    const secretVisible = this.state.secretVisible;
    let pageToDisplay;
    if(secretVisible){
      pageToDisplay = <SecretPage onTakeMeBackClicked={this.handleLogOff}/>;
    }
    else{
     pageToDisplay = <Password password={this.state.password} onChange={this.handleChange} onSubmit={this.handleSubmit} />; 
    }
    return (
      <div>
        {pageToDisplay}
      </div>
    );
  }
}