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

谁决定该值有效？我想输入字段的唯一工作是将值定向回保持状态的组件，那么这是否意味着只有 Page 才能确定值是否有效？

然后我应该如何让弹出窗口出现？ Page 是否应该触发一个新的 bool 状态元素，该元素将通过 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);

最佳答案

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

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

随心所欲。 React 用于渲染数据模型。数据模型应该知道什么有效或无效。您可以使用 Backbone 模型、JSON 数据或任何您想要表示数据及其错误状态的内容。

更具体地说:

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

要遵循的规则是:

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

如何决定某物应该是 Prop 还是状态？考虑一下:除了文本字段之外，您的应用程序的任何部分都想知道输入的值是错误的吗？如果否，请将其设为状态。如果是，应该是 Prop 。

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

该错误应该存在于何处？
如果您的应用正在渲染 Backbone 模型(例如)，则该模型本身将具有您可以使用的 validate() 方法和 validateError 属性。您可以渲染其他可以执行相同操作的智能对象。 React 还表示尽量将 props 保持在最低限度并生成其余数据。因此，如果您有一个验证器(例如 https://github.com/flatiron/revalidator)，那么您的验证可能会逐渐下降，并且任何组件都可以使用它匹配的验证来检查 props 以查看它是否有效。

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

(我个人使用 Backbone 模型并在 React 中渲染它们。我有一个顶层错误警报，如果任何地方有错误我都会显示，并描述错误。)

关于javascript - 如何使用 React.JS 正确验证输入值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24019431/