反応jsフォームの検証の仕方

Question

反応jsフォームの検証方法。

私は2つのフィールドでフォームを作成しました。 2つのフィールドが有効な場合、保存ボタンを有効にするだけです。

import React from 'react' 
import { Button, Checkbox, Form } from 'semantic-ui-react' 

const FormExampleForm =() => (
    <Form> 
    <Form.Field> 
     <label>First Name</label> 
     <input placeholder='First Name' /> 
    </Form.Field> 
    <Form.Field> 
     <label>Last Name</label> 
     <input placeholder='Last Name' /> 
    </Form.Field> 
    <Form.Field> 
     <Checkbox label='I agree to the Terms and Conditions' /> 
    </Form.Field> 
    <Button type='submit'>Submit</Button> 
    </Form> 
) 

export default FormExampleForm 

Answer 1

上記のコードではRedux-formを使用しないため、カスタムJS検証コードを書くことができます。このために、あなたは今、内部<Button onClick={this.handleSubmit} />

へのonClickプロパティを追加onChange={()=>this.setState({first_name: event.target.value})}

ONCHANGEすべての入力要素の

1. 初期化状態

   contructor(){ 
   this.state{ 
       first_name: null, 
       last_name: null, 
   } 
   } 
   

2. の変更状態の下に従う必要がありますhandleSubmit()ローカル状態を介して値を取得できるo F成分と（this.state.first_name == ""）場合

   ような検証ルールを追加{ にconsole.log Reduxので（ "" ファーストネームを入力してください）

   }

Answer 2

が6.7ありますを形成これを行うために使用できるpristineという単純なプロパティです。しかし、ユーザーが少なくとも1つの入力フィールドに何らかの値を入力すると、送信ボタンがアクティブになります。これを達成するには、このようなことをする必要があります。

render() { 
    // const { handleSubmit } = this.props; 
    const {handleSubmit, pristine, reset, submitting} = this.props 
    return (
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
     <div> 
      <label>First Name</label> 
      <div> 
       <Field name="firstName" component="input" type="text" placeholder="First Name"/> 
      </div> 
     </div> 
     <button type="submit" className="btn btn-primary" disabled={pristine || submitting}>Submit</button> 
     </form> 
    ); 
    } 
} 

しかし、あなたは、送信ボタンを有効にすると、ユーザの入力値を2つの与えられたフィールド内またはそう言う必要があれば、これが複雑になります。このようなことをする必要があります。ここに私のサンプルの使用法があります。フォームにはfirstName、lastName、ageの3つのフィールドがあります。ユーザーがfirstNameおよびlastName入力フィールドの値をここに入力した場合にのみ、サブミット・ボタンがアクティブになります。次のコードを確認してください。

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

class UserNew extends Component { 
    constructor(props) { 
    super(props); 
    this.isSubmitEnabled = this.isSubmitEnabled.bind(this); 
    } 


    onSubmit(values) { 
    console.log(values); 
    } 

    isSubmitEnabled() { 
    // Access field values here and validate them 
    const firstName = this.props.firstNameValue; 
    const lastName = this.props.lastNameValue; 
    if(firstName && lastName){ 
     return true; 
    } 
    return false; 
} 

    render() { 
    const { handleSubmit } = this.props; 
    const isEnabled = this.isSubmitEnabled(); 


    return (
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
     <div> 
     <label>First Name</label> 
     <div> 
      <Field name="firstName" component="input" type="text" /> 
     </div> 
     </div> 
     <div> 
     <label>Last Name</label> 
     <div> 
      <Field name="lastName" component="input" type="text" /> 
     </div> 
     </div> 
     <div> 
     <label>Age</label> 
     <div> 
      <Field name="age" component="input" type="text" /> 
     </div> 
     </div> 
     <button type="submit" className="btn btn-primary" disabled={!isEnabled}>Submit</button> 
     </form> 
    ); 
    } 
} 


UserNew = reduxForm({ 
    form: 'UserNewForm' 
})(
    UserNew 
); 

// Decorate with connect to read form values 
const selector = formValueSelector('UserNewForm') // <-- same as form name 
UserNew = connect(state => { 
    const firstNameValue = selector(state, 'firstName') 
    const lastNameValue = selector(state, 'lastName') 
    return { 
    firstNameValue, 
    lastNameValue, 
    } 
})(UserNew) 


export default UserNew; 

フィールド値にアクセスするには、ReduxFormsでformValueSelectorを使用する必要があります。そのためには、connectヘルパーを使用してフォームをreduxストアに接続する必要があります。

これが役に立ちます。ハッピーコーディング！