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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (833)

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

谁决定价值是有效的?我认为输入字段唯一的作用是将值返回到保存状态的组件,那么这是否意味着只有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);
提问于
用户回答回答于

首先,这里是我将在下面提到的一个例子:http : //jsbin.com/rixido/2/edit

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

随你怎么便。React用于呈现数据模型。数据模型应该知道什么是有效的或不是。可以使用Backbone模型,JSON数据或任何想要表示数据的错误状态。

进一步来说:

反应对你的数据通常是不可知的。它用于渲染和处理事件。

遵循的规则是:

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

如何决定某件事应该成为道具还是国家?考虑一下:除了文本字段,你的应用程序的任何部分是否都想知道输入的值不好?如果不是,请将其设为状态。如果是的话,它应该是一个道具。

例如,如果想要单独的视图来呈现“在此页面上有2个错误”。那么你的错误将不得不被顶级数据模型所知晓。

那个错误应该在哪里生活? 如果应用程序正在渲染Backbone模型(例如),则该模型本身将具有可以使用的validate()方法和validateError属性。可以渲染其他可以执行相同操作的智能对象。React还表示,尽量减少道具并生成其余的数据。所以如果你有一个验证器(例如https://github.com/flatiron/revalidator),那么你的验证可以慢慢下降,任何组件都可以检查道具是否与匹配的验证一致,以确定它是否有效。

这主要取决于你。

用户回答回答于

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

我写一封简单的电子邮件并提交按钮表单,验证电子邮件并提交表单。使用redux-form,默认情况下在html onSubmit action上运行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;

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励