Wie bedingte Klassen in reagieren?

Question

Ich versuche, bedingte Variablen mit Reactjs zu verstehen. Bei Verwendung von einfachem HTML und jQuery würde mein Code beispielsweise so aussehen.

HTML:

<p class="aclass">Error</p> 
<input id="dabox" type="text" /> 
<input id="dabutton" type="button" value="Ship It" /> 

JQuery:

$('#dabutton').click(function(){ 
if ($('#dabox').val()== ""){ 
$('.aclass').addClass('error'); 
} 
}); 

CSS:

.error {color: red;} 
.aclass {//does nothing//} 

Ich habe Probleme zu verstehen, wie bedingt die Klasse mit Reactjs auf. Meine beste Vermutung ist so etwas wie so:

JavaScript

runcheck:function(){ 
if (document.getElementById('dabox').value == 0){ 
var depends = "aclass error"; 
} 
}, 

render:function(){ 
var depends = "aclass"; 
return (
<p className={depends}>Error</p> 
<input onClick="runcheck()" type="submit"/> 
) 
} 

Natürlich ist der Code funktioniert nicht. Wie würde ich diese Variablen bedingt mit Reactjs setzen?

Answer 1

Ihr Beispiel veranschaulicht einige grundlegende Denkweisenänderungen, die Sie bei der Arbeit mit React benötigen. Sie sind nicht schwer zu begreifen, für den Anfang einen Blick auf nehmen:

• https://facebook.github.io/react/docs/thinking-in-react.html
• https://facebook.github.io/react/docs/forms.html
• https://facebook.github.io/react/tips/if-else-in-JSX.html

Und hier ist ein Code für Sie:

import React from 'react'; 

export default React.createClass({ 
    /** 
    * Component's current (internal) state 
    */ 
    getInitialState() { 
     return { 
      text: '' // initial value for text input 
     }; 
    }, 

    /** 
    * Renders virtual DOM according to component's current state 
    */ 
    render() { 
     const showError = this.state.text == ''; 

     return <div> 
      { showError 
        ? <p className='error'>Error</p> 
        : null 
      } 

      <input type='text' value={this.state.text} onChange={this.onChange} /> 
      <input type='button' onClick={this.onClick} value='Ship It' /> 
     </div> 
    }, 

    /** 
    * Every time the textbox is changed, this handler is called. 
    * It simply updates the component's state 
    */ 
    onChange(ev) { 
     // State changes cause render to be re-evaluated and your DOM will be updated accordingly. 
     this.setState({ text: ev.target.value }); 
    }, 

    /** 
    * When the button is clicked, this handler is called 
    */ 
    onClick() { 
     // ... 
    } 
});