Question

第二部分（即注册部分）未呈现

目的是在单击每个选项卡时更改跨度，即签名，注册并忘记这是主类，并在其中调用表单类。以下代码是用于在屏幕上呈现的原始代码


   class App extends React.Component {
 constructor(props) {
   super(props);
   // this.setOptionSignIn = this.setOptionSignIn.bind(this);
   // this.setOptionSignUp = this.setOptionSignUp.bind(this);
   // this.setOptionForget = this.setOptionForget.bind(this);

   this.state = {
     option : 1    
   }
 }

setOptionSignIn = () => {
 this.setState(()=> {
   return {
     option : 1
   }
 })
}
setOptionSignUp = () => {
 this.setState(()=> {
   return {
     option : 2
   }
 })
}
setOptionForget = () => {
 this.setState(()=> {
   return {
     option : 3
   }
 })
}
render() {
 return (
     <div className="container">
     {
       console.log(this.state.option+"before and type is "+ typeof this.state.option)
     }
     <header className={
 `header-headings ${this.state.option === 1 ? 'sign-in' : this.state.option === 2 ? 'sign-up' : 'forgot'}`}>       
         <span>Sign in to your account</span>
         <span>Create an account</span>    
         <span>Reset your password</span>
     </header>   
     {
       console.log(this.state.option+"after and type is "+ typeof this.state.option)
     }
     <ul className="options">
     <li className={this.state.option === 1 ? 'active' : ''} onClick={this.setOptionSignIn}>Sign in</li>
     <li className={this.state.option === 2 ? 'active' : ''} onClick={this.setOptionSignUp}>Sign up</li>
     <li className={this.state.option === 3 ? 'active' : ''} onClick={this.setOptionForget}>Forget</li> 
     </ul>
     <Form optionState={this.state.option} />
     </div>
 )}
}

Answer 1

您在上面使用的ternary条件正确。问题可能与未正确更新的状态有关。

必须使用this.setState()方法更新状态，而不是直接在this.state对象上更改状态属性。

请查看下面的代码：

登录方法：

setOptionSignIn() {
   this.setState({
     option: 1
   });
}

注册方法

setOptionSignUp() {
   this.setState({
      option: 2
   });
}

ForgetPassword方法：

setOptionForget() {
   this.setState({
      option: 0
   });
}

Answer 2

要基于选项切换跨度，请在跨度中插入条件。

 <span>{this.state.option === 1 ? 'Sign in to your account' : this.state.option === 2 ? 'Create an account' : 'Reset your password'}</span>

希望这对您有所帮助。

三元运算子第二部分未呈现React JS

2 个答案: