La segunda parte, es decir, la parte de registro no se procesa

La intención es cambiar el lapso al hacer clic en cada pestaña, es decir, firmar, registrarse y olvidar. Esta es la clase principal y se llama a la clase de formulario. El siguiente código es el código original utilizado para representar en la pantalla

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

Krishna Kr

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.

La condición ternary que está utilizando arriba es correcta. El problema puede estar relacionado con el estado que no se actualiza correctamente.

El estado debe actualizarse utilizando el método this.setState() y no cambiando las propiedades del estado directamente en el objeto this.state .

Por favor, consulte el siguiente código:

Método de inicio de sesión:

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

Método de registro

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

Método ForgetPassword:

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

Para cambiar el intervalo según la opción, inserte la condición en intervalo.

  {amp}lt;span{amp}gt;{this.state.option === 1 ? 'Sign in to your account' : this.state.option === 2 ? 'Create an account' : 'Reset your password'}{amp}lt;/span{amp}gt; 

Espero que esto te ayude.

No creo que haya nada malo con lo que has escrito en tu código.

He creado una demostración de codesandbox , y si inspecciona el elemento, notará que el nombre de classname se actualiza y se vuelve a representar a medida que cambia los valores de estado.

 constructor(props) { super(props); this.state = { option: 2 }; } 

Es posible que desee verificar el uso accidental de comillas simples o dobles y asegurarse de que no copió ninguna comilla de otros IDE por accidente.

En cuanto a la actualización del estado, puede usar setState (lea sobre esto en los documentos oficiales de React),

 updateState(option) { this.setState({ option }); } 

Y la option seleccionada actualmente en su state se actualizará, lo que provocará que vuelva a producirse.

Y por último, pero no arrendar, puede representar las opciones seleccionadas en función del estado actual.

 {this.state.option === 1 {amp}amp;{amp}amp; {amp}lt;span{amp}gt;Sign in to your account{amp}lt;/span{amp}gt;} {this.state.option === 2 {amp}amp;{amp}amp; {amp}lt;span{amp}gt;Create an account{amp}lt;/span{amp}gt;} {this.state.option === 3 {amp}amp;{amp}amp; {amp}lt;span{amp}gt;Reset your password{amp}lt;/span{amp}gt;} 

Pero, por supuesto, todo esto puede simplificarse al desestructurar su objeto de state en su método render() .

 render() { const { option } = this.state; return ( {amp}lt;div className="container"{amp}gt; {amp}lt;header className={`header-headings ${ option === 1 ? "sign-in" : option === 2 ? "sign-up" : "forgot" }`} {amp}gt; {option === 1 {amp}amp;{amp}amp; {amp}lt;span{amp}gt;Sign in to your account{amp}lt;/span{amp}gt;} {option === 2 {amp}amp;{amp}amp; {amp}lt;span{amp}gt;Create an account{amp}lt;/span{amp}gt;} {option === 3 {amp}amp;{amp}amp; {amp}lt;span{amp}gt;Reset your password{amp}lt;/span{amp}gt;} {amp}lt;/header{amp}gt; {amp}lt;ul className="options"{amp}gt; {amp}lt;li className={option === 1 ? "active" : ""} onClick={() ={amp}gt; this.updateState(1)} {amp}gt; Sign in {amp}lt;/li{amp}gt; {amp}lt;li className={option === 2 ? "active" : ""} onClick={() ={amp}gt; this.updateState(2)} {amp}gt; Sign up {amp}lt;/li{amp}gt; {amp}lt;li className={option === 3 ? "active" : ""} onClick={() ={amp}gt; this.updateState(3)} {amp}gt; Forget {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {/* {amp}lt;Form optionState={this.state.option} /{amp}gt; */} {amp}lt;/div{amp}gt; ); }