时间戳

首页 > 解决方案 > 三元运算符第二部分不渲染 React JS

javascript - 三元运算符第二部分不渲染 React JS

问题描述

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

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


   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>
 )}
}

标签： javascripthtmlreactjsecmascript-6jsx

解决方案

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

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

请查看以下代码：

登录方法：

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

注册方式

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

忘记密码方法：

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

推荐阅读