如何使用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),那么你的验证可能会崩溃,任何组件都可以通过匹配验证检查道具,看看它是否有效.

这在很大程度上取决于你.

(我个人使用Backbone模型并在React中渲染它们.我有一个顶级错误警告,我会在任何地方显示错误,描述错误.)

Answer 2

您可以使用 npm install --save redux-form

我正在写一个简单的电子邮件和提交按钮表单,它验证电子邮件和提交表单.使用redux-form,默认情况下,form在html onSubmit操作上运行event.preventDefault().

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';

class LoginForm extends Component {
  onSubmit(props) {
    //do your submit stuff
  }


  render() {
    const {fields: {email}, handleSubmit} = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <input type="text" placeholder="Email"
               className={`form-control ${email.touched && email.invalid ? 'has-error' : '' }`}
          {...email}
        />
          <span className="text-help">
            {email.touched ? email.error : ''}
          </span>
        <input type="submit"/>
      </form>
    );
  }
}

function validation(values) {
  const errors = {};
  const emailPattern = /(.+)@(.+){2,}\.(.+){2,}/;
  if (!emailPattern.test(values.email)) {
    errors.email = 'Enter a valid email';
  }

  return errors;
}

LoginForm = reduxForm({
  form: 'LoginForm',
  fields: ['email'],
  validate: validation
}, null, null)(LoginForm);

export default LoginForm;