كيفية التحقق من صحة قيم الإدخال بشكل صحيح مع رد فعل.شبيبة?

Question

لدي شكل بسيط.يتم الاحتفاظ بجميع المكونات والحالة في مكون الصفحة.هناك 2 رؤوس العرض و 3 حقول الإدخال.من المفترض أن يكون الإدخال الأول نصا ، ومن المفترض أن يكون الإدخال الثاني والثالث.عندما يقوم المستخدم بإدخال نوع خاطئ من البيانات ، أريد أن تظهر رسالة خطأ بجوار حقل الإدخال.أسئلتي تتعلق بأفضل الممارسات في رد الفعل.شبيبة

من يقرر أن القيمة صالحة?أفترض أن المهمة الوحيدة لحقل الإدخال هي توجيه القيمة مرة أخرى إلى المكون الذي يحمل الحالة, فهل هذا يعني أن الصفحة فقط هي التي يمكنها تحديد ما إذا كانت القيمة صالحة?

كيف يجب أن يكون ثم المنبثقة تظهر?هل يجب أن تقوم الصفحة بتشغيل عنصر حالة منطقي جديد سيتم تمريره من خلال المجرم الذي سيخبر الإدخال التكيفي للكشف عن رسالة الخطأ?

جسفيدل

شبيبة:

/**
 * @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؟

ومع ذلك تريد. التتفاعل هو تقديم نموذج البيانات. يجب أن يعرف نموذج البيانات ما هو صالح أم لا. يمكنك استخدام نماذج العمود الفقري أو JSON Data أو أي شيء تريد تمثيل البيانات وحالة الخطأ.

أكثر تحديدا:

تفاعل

غير ملائم بشكل عام نحو بياناتك. إنه لتقديم والتعامل مع الأحداث.

القواعد التي يجب اتباعها هي:

1. يمكن أن تغير عناصر حالتها.
2. لا يمكنهم تغيير الدعائم.
3. يمكنهم استدعاء رد الاتصال الذي سيغير الدعائم أعلى المستوى.

كيفية تحديد ما إذا كان ينبغي أن يكون هناك شيء ما دعامة أو دولة؟ النظر في هذا: هل تريد أي جزء من تطبيقك بخلاف حقل النص معرفة أن القيمة التي تم إدخالها سيئة؟ إذا لم يكن هناك، اجعلها دولة. إذا كانت الإجابة بنعم، يجب أن تكون دعامة

على سبيل المثال، إذا كنت ترغب في عرض طريقة عرض منفصلة "لديك أخطاء في هذه الصفحة." ثم يجب أن يعرف الخطأ الخاص بك بنموذج بيانات Toplevel.

أين يجب أن يعيش هذا الخطأ؟ إذا كان تطبيقك يعرض نماذج العمود الفقري (على سبيل المثال)، فإن النموذج نفسه سيكون له طريقة التحقق من الصحة () والخاصية ValidateError التي يمكنك استخدامها. يمكنك تقديم الكائنات الذكية الأخرى التي يمكن أن تفعل الشيء نفسه. الرد يقول أيضا محاولة للحفاظ على الدعائم كحد أدنى وتوليد بقية البيانات. لذلك إذا كان لديك خدمة منصة (مثل https://github.com/flatiron/revaidator ) ثم يمكن للتحقق من صحةك وأي يمكن للمكون التحقق من الدعائم مع التحقق من صحة مطابقة لمعرفة ما إذا كان صالحا.

الأمر متروك لك إلى حد كبير.

(أنا شخصيا باستخدام نماذج العمود الفقري وتقديمها في التتفاعل. لدي تنبيه خطأ TopLevel الذي أظهره إذا كان هناك خطأ في أي مكان، وصف الخطأ.)

Answer 2

يمكنك استخدام npm install --save redux-form

أنا أكتب بريدا إلكترونيا بسيطا ونموذج زر إرسال ، والذي يتحقق من صحة البريد الإلكتروني ويقدم النموذج.مع مسترجع شكل ، شكل افتراضيا يدير الحدث.بريفنتدفولت () على هتمل أونسوبميت العمل.

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;

Answer 3

قد كتبت هذه المكتبة والتي تتيح لك لف مكونات عنصر النموذج الخاص بك، ويتيحيمكنك تحديد الموصلات الخاصة بك بالتنسيق: -

giveacodicetagpre.

Answer 4

jsfiddle الخاص بك لا يعمل بعد الآن. لقد قمت بإصلاحها: http://jsfiddle.net/tkrotoff/bgc6e/40/ho > استخدام فصول الرد 16 و ES6.

giveacodicetagpre.

والآن نفس الرمز تم اختراقه مع التحقق من صحة النموذج بفضل هذه المكتبة: /github.com/tkrotoff/react-form-with-constrants => http://jsfiddle.net/tkrotoff/k4qa4heg/

href="https://i.stack.imgur.com/axfrs.png" er="nofollow noreferrer">

giveacodicetagpre.

الحل المقترح هنا يترافق كما حاولت الاحتفاظ بها بالقرب من JSfiddle الأصلي. للحصول على التحقق من صحة النموذج المناسبة مع تفاعل نموذج مع القيود، تحقق من https:// github.com/tkrotoff/react-form-with-constraints#examples

Answer 5

استخدام onChange={this.handleChange.bind(this, "name") الطريقة و value={this.state.fields["name"]} في حقل إدخال النص وأدناه إنشاء عنصر الامتداد لإظهار الخطأ ، راجع المثال أدناه.

export default class Form extends Component {

  constructor(){
    super()
    this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }
  }

  handleValidation(){
       let fields = this.state.fields;
       let errors = {};
       let formIsValid = true;

       if(!fields["name"]){
          formIsValid = false;
          errors["name"] = "Name field cannot be empty";
       }

       if(typeof fields["name"] !== "undefined" && !fields["name"] === false){
          if(!fields["name"].match(/^[a-zA-Z]+$/)){
             formIsValid = false;
             errors["name"] = "Only letters";
          }
       }

       if(!fields["email"]){
          formIsValid = false;
          errors["email"] = "Email field cannot be empty";
       }

       if(typeof fields["email"] !== "undefined" && !fields["email"] === false){
          let lastAtPos = fields["email"].lastIndexOf('@');
          let lastDotPos = fields["email"].lastIndexOf('.');

          if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') === -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
             formIsValid = false;
             errors["email"] = "Email is not valid";
           }
      }

      if(!fields["message"]){
         formIsValid = false;
         errors["message"] = " Message field cannot be empty";
      }

      this.setState({errors: errors});
      return formIsValid;
  }

  handleChange(field, e){
      let fields = this.state.fields;
      fields[field] = e.target.value;
      this.setState({fields});
  }

  handleSubmit(e){
      e.preventDefault();
      if(this.handleValidation()){
          console.log('validation successful')
        }else{
          console.log('validation failed')
        }
  }

  render(){
    return (
      <form onSubmit={this.handleSubmit.bind(this)} method="POST">
          <div className="row">
            <div className="col-25">
                <label htmlFor="name">Name</label>
            </div>
            <div className="col-75">
                <input type="text" placeholder="Enter Name"  refs="name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/>
                <span style={{color: "red"}}>{this.state.errors["name"]}</span>
            </div>
          </div>
          <div className="row">
            <div className="col-25">
              <label htmlFor="exampleInputEmail1">Email address</label>
            </div>
            <div className="col-75">
                <input type="email" placeholder="Enter Email" refs="email" aria-describedby="emailHelp" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/>
                <span style={{color: "red"}}>{this.state.errors["email"]}</span>
            </div>
          </div>
          <div className="row">
            <div className="col-25">
                <label htmlFor="message">Message</label>
            </div>
            <div className="col-75">
                <textarea type="text" placeholder="Enter Message" rows="5" refs="message" onChange={this.handleChange.bind(this, "message")} value={this.state.fields["message"]}></textarea>
                <span style={{color: "red"}}>{this.state.errors["message"]}</span>
            </div>
          </div>
          <div className="row">
            <button type="submit" disabled={this.state.disabled}>{this.state.disabled ? 'Sending...' : 'Send'}</button>
          </div>
      </form>
    )
  }
}

Answer 6

قضيت مؤخرا أسبوع يدرس الكثير من الحلول للتحقق من صحة أشكالي في التطبيق.لقد بدأت مع كل أكثر التحدق لكنني لم أستطع العثور على شخص يعمل كما كان متوقعا.بعد بضعة أيام، أصبحت محبطا تماما حتى وجدت صيغة جديدة ومدهشة للغاية: https://github.com/kettanaito/react- advanced-form

المطور مستجيب للغاية وحله، بعد بحثي، يستحق أن يصبح أكثر منظوع من وجهة نظري.آمل أن يساعده وسوف نقدر.

Answer 7

بعد آخر يذهب في نفس المشكلة - form-container على الآلية الوقائية الوطنية

Answer 8

لقد استخدمت Redux-Form و Formik في الماضي، وتفاعل مؤخرا على الخطاف المقدمة، وقد بنيت خطاف مخصص لذلك.يرجى التحقق من ذلك ومعرفة ما إذا كان جعل التحقق من صحة النموذج أسهل بكثير.

github: https://github.com/bluebill1049/react-hook-form>

الموقع الإلكتروني: http://react-hook-form.now.sh

مع هذا النهج، لم تعد تقوم بإدخال التحكم فيه أيضا.

مثال أدناه:

giveacodicetagpre.

Answer 9

في بعض الأحيان يمكنك الحصول على حقول متعددة مع التحقق من صحة مماثلة في التطبيق الخاص بك.في مثل هذه الحالة، أوصي بإنشاء حقل مكون مشترك حيث يمكنك الاحتفاظ بهذا التحقق من الصحة.

على سبيل المثال، دعنا نفترض أن لديك إدخال نص إلزامي في أماكن قليلة في طلبك.يمكنك إنشاء مكون TextInput:

giveacodicetagpre.

ثم يمكنك استخدام هذا المكونات في أي مكان في التطبيق الخاص بك:

giveacodicetagpre.

الفوائد:

• أنت لا تكرر منطق التحقق من الصحة
• رمز أقل في النماذج الخاصة بك - إنه أكثر قابلية للقراءة
• يمكن الاحتفاظ بمنطق الإدخال المشترك الآخر في المكون
• كنت تتبع القاعدة التي يجب أن يكون العنصر أكثر غبية

المرجع. https://webfellas.tech/#/afarticle/5