如何使用React.JS正确验证输入值？

Question

我有一个简单的表格。所有组件和状态都保存在Page组件中。有2个显示标题和3个输入字段。第一个输入应该是文本，第二个和第三个输入应该是整数。当用户输入错误的数据类型时，我想在输入字段旁边弹出一条错误消息。我的问题与React.JS的最佳做法有关

谁认为该值有效？我想输入字段的唯一工作就是将值引导回到保持状态的组件，这是否意味着只有Page可以确定值是否有效？

然后应该如何显示弹出窗口？Page是否应该触发将通过perp传递的新布尔状态元素，该元素将告诉Adaptive_Input显示错误消息？

JSFiddle

JS：

/**
 * @jsx React.DOM
 */
var Adaptive_Input = React.createClass({ 
    handle_change: function(){
        var new_text = this.refs.input.getDOMNode().value;
        this.props.on_Input_Change(new_text);
    },
    render: function(){
        return (
                <div className='adaptive_placeholder_input_container'>
                    <input 
                        className="adaptive_input"
                        type="text" 
                        required="required" 
                        onChange= {this.handle_change}
                        ref="input"
                    ></input>
                    <label
                        className="adaptive_placeholder"
                        alt={this.props.initial}
                        placeholder={this.props.focused}
                    ></label>
                </div>              
                );
    }
});

var Form = React.createClass({
    render: function(){
        return (
                <form>
                    <Adaptive_Input
                        initial={'Name Input'}
                        focused={'Name Input'}
                        on_Input_Change={this.props.handle_text_input}
                    />
                    <Adaptive_Input
                        initial={'Value 1'}
                        focused={'Value 1'}
                        on_Input_Change={this.props.handle_value_1_input}
                    />
                    <Adaptive_Input
                        initial={'Value 2'}
                        focused={'Value 2'}
                        on_Input_Change={this.props.handle_value_2_input}
                    />
                </form>
                );
    }
});

var Page = React.createClass({
    getInitialState: function(){
        return {
            Name : "No Name",
            Value_1 : '0',
            Value_2 : '0',
            Display_Value: '0'
        };
    },
    handle_text_input: function(new_text){
        this.setState({
                Name: new_text
            });
    },
    handle_value_1_input: function(new_value){
        console.log("===");
        var updated_display = parseInt(new_value) + parseInt(this.state.Value_2);
        updated_display = updated_display.toString();
        this.setState({
                Display_Value: updated_display 
            });
    },
    handle_value_2_input: function(new_value){
        var updated_display = parseInt(this.state.Value_1) + parseInt(new_value);
        updated_display = updated_display.toString();
        this.setState({
                Display_Value: updated_display
            });
    },
    render: function(){
        return(
                <div>
                    <h2>{this.state.Name}</h2>
                    <h2>Value 1 + Value 2 = {this.state.Display_Value}</h2>
                    <Form
                        handle_text_input={this.handle_text_input}
                        handle_value_1_input = {this.handle_value_1_input}
                        handle_value_2_input = {this.handle_value_2_input}
                    />
                </div>
        );
    }
});

React.renderComponent(<Page />, document.body);

Answer 1

首先，下面是我将在下面提及的示例：http :
//jsbin.com/rixido/2/edit

如何使用React.JS正确验证输入值？

随你怎么便。React是用于渲染数据模型的。数据模型应该知道什么是有效的。您可以使用Backbone模型，JSON数据或任何您想要表示数据及其错误状态的东西。

进一步来说：

React通常与您的数据无关。它用于呈现和处理事件。

遵循的规则是：

1. 元素可以更改其状态。
2. 他们不能改变道具。
3. 他们可以调用将更改顶级道具的回调。

如何决定某个东西应该是道具还是国家？考虑一下：您的应用程序中除文本字段以外的任何部分都想知道输入的值是否错误？如果否，则将其设置为状态。如果是的话，那应该是一个道具。

例如，如果您想要一个单独的视图来呈现“此页面上有2个错误”。那么顶级数据模型就必须知道您的错误。

该错误应该存在何处？
例如，如果您的应用正在渲染Backbone模型，则模型本身将具有您可以使用的validate（）方法和validateError属性。您可以渲染其他可以执行相同操作的智能对象。React还说，要尽量减少道具并生成其余数据。因此，如果您有一个验证器（例如https://github.com/flatiron/revalidator），则您的验证可能会trick滴而下，任何组件都可以通过匹配验证来检查道具，以查看其是否有效。

这在很大程度上取决于您。

（我 个人 使用的是Backbone模型，并在React中渲染它们。我有一个顶级错误警报，可以显示是否有错误，并描述错误。）