反応の条件付きクラスを設定するには？

Question

私はReactjを使って条件変数を理解しようとしています。たとえば、plain olのHTMLとjQueryを使用すると、私のコードはそうであるように見えます。

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

私は条件付きでReactjsを使用してクラスを設定する方法を理解する問題を抱えています。

は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"/> 
) 
} 

当然のコードは動作しません：私の最高の推測では、それほどのようなものです。 Reactjを使って条件付きでこれらの変数を設定するにはどうすればいいですか？

Answer 1

あなたの例は、Reactを使って作業する際に必要な基本的な考え方の変化を示しています。

• 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

そして、ここであなたのためにいくつかのコードです：

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() { 
     // ... 
    } 
});