javascript - 如何在react中设置条件类？

Question

我正在尝试使用 Reactjs 来理解条件变量。例如，使用普通的 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"/>
)
}

代码自然是行不通的。我将如何使用 Reactjs 有条件地设置这些变量？

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