テキストフィールドのコンポーネント番号の検証js

Question

私は3つのテキストフィールドを持っているので、誰かがテキストを入力して続けると、アプリケーションは数字だけが許されているというエラーを表示するはずです。

次のコードは、テキストフィールドが空であればOKですが、ユーザーがテキストまたは数字を入力しているかどうかを確認するもう1つの検証では保留中です。

import React from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import TextField from 'material-ui/TextField'; 
import Divider from 'material-ui/Divider'; 

import cr from '../styles/general.css'; 


export default class Example extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     buy_: '', 
     and_: '', 
     save_: '', 

    }; 
    this.handleChange = this.handleChange.bind(this); 

    } 

    handleChange(event, index, value) { 
    this.setState({value}); 
    } 



    clear() { 
    console.info('Click on clear'); 
    this.setState({ 
     buy_: '', 
     and_: '', 
     save_: '' 
    }); 
    } 

    validate() { 
    let isError = false; 
    const errors = { 
     descriptionError: '' 
    }; 

    if (this.state.buy_.length < 1 || this.state.buy_ === null) { 
     isError = true; 
     errors.buy_error = 'Field requiered'; 
    } 
    if (this.state.and_.length < 1 || this.state.and_ === null) { 
     isError = true; 
     errors.and_error = 'Field requiered'; 
    } 
    if (this.state.save_.length < 1 || this.state.save_ === null) { 
     isError = true; 
     errors.save_error = 'Field requiered'; 
    } 

    this.setState({ 
     ...this.state, 
     ...errors 
    }); 

    return isError; 
    } 

    onSubmit(e){ 
    e.preventDefault(); 
    // this.props.onSubmit(this.state); 
    console.log('click onSubmit') 
    const err = this.validate(); 
    if (!err) { 
     // clear form 
     this.setState({ 
     buy_error: '', 
     and_error: '', 
     save_error: '' 
     }); 
     this.props.onChange({ 
     buy_: '', 
     and_: '', 
     save_: '' 
     }); 
    } 
    } 

    render() { 


    return (
     <div className={cr.container}> 
     <div className ={cr.boton}> 
      <Divider/> 
      <br/> 
     </div> 

     <div className={cr.rows}> 
      <div> 
      <TextField 
       onChange={(e) => {this.setState({buy_: e.target.value})}} 
       value={this.state.buy_} 
       errorText={this.state.buy_error} 
       floatingLabelText="Buy" 
      /> 
      </div> 
      <div> 
      <TextField 
       onChange={(e) => {this.setState({and_: e.target.value})}} 
       value={this.state.and_} 
       errorText={this.state.and_error} 
       floatingLabelText="And" 
      /> 
      </div> 
      <div> 
      <TextField 
       onChange={(e) => {this.setState({save_: e.target.value})}} 
       value={this.state.save_} 
       errorText={this.state.save_error} 
       floatingLabelText="Save" 
      /> 
      </div> 
     </div> 

     <div className={cr.botonSet}> 
      <div className={cr.botonMargin}> 
      <RaisedButton 
       label="Continue" 
       onClick={e => this.onSubmit(e)}/> 
      </div> 
      <div> 
      <RaisedButton 
       label="Clear" 
       secondary ={true} 
       onClick={this.clear = this.clear.bind(this)} 
      /> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

誰かが私に助けてくれますか？

ありがとうございます。

Answer 1

あなたはこれを使って、入力テキストからユーザーを防ぐことができます：あなたはstateにエラーオブジェクトを初期化するが、this.state.and_errorとしてTextFieldにアクセスされない

<TextField 
    onChange={(e) => { 
     if(e.target.value === '' || /^\d+$/.test(e.target.value)) { 
      this.setState({and_: e.target.value}) 
     } else { 
      return false; 
     } 
    }} 
    value={this.state.and_} 
    errorText={this.state.and_error} 
    floatingLabelText="And" 
/> 

Answer 2

。あなたは、だからあなたのTextField

​​

であなたの検証機能は、これはHEPSあなた意志

validate() { 
    let isError = false; 
    const errors = this.state.errors; 

    if (this.state.buy_.toString().length < 1 || this.state.buy_ === null) { 
     isError = true; 
     errors.buy_error = 'Field requiered'; 
    } 

    if (this.state.and_.toString().length < 1 || this.state.and_ === null) { 
     isError = true; 
     errors.and_error = 'Field requiered'; 
    } 

    if (this.state.save_.toString().length < 1 || this.state.save_ === null) { 
     isError = true; 
     errors.save_error = 'Field requiered'; 
    } 

    this.setState({errors}); 

    return isError; 
} 

よう希望になりますようにコンストラクタでthis.state = { and_error: "" }をエラーを初期化するか、

this.state = { 
    error: { 
     and_error: "", 
     buy_error: "", 
     save_error: "" 
    } 
} 

としてerrorオブジェクトを初期化する必要がありますどちらか！

Answer 3

このコードを検証関数に追加してみてください。このように、これらの検証を追加RegexExpressionファイルで

import * as RegExp from './RegExpression'; 

    validate() { 
    let isError = false; 
    const errors = { 
     descriptionError: '' 
    }; 

    if (this.state.buy_ && !RegExp.NAME.test(this.state.buy_)) { 
     // validation check if input is name 
     isError = true; 
     errors.buy_error = 'Invalid name'; 
    } 
    if (this.state.and_ && !RegExp.NUMBER.test(this.state.and_)) { 
     // validation check if input is number 
     isError = true; 
     errors.and_error = 'Invalid Number'; 
    } 

    this.setState({ 
     ...this.state, 
     ...errors 
    }); 

    return isError; 
    } 

：あなたが好きなテキストや数値のためのあなたのフィールドを検証するために正規表現を使用することができます

export const NAME = /^[a-z ,.'-()"-]+$/i; 
export const NUMBER = /^[0-9]*$/ ; 

Answer 4

テキスト提出のコンポーネントでは、にユーザーを制限することができます下記のようにtestメソッドを使用してテキストを入力してください

<TextField 
    onChange={(e) => { 
    if(e.target.value == '' || (/\D/.test(e.target.value))) { 
     this.setState({and_: e.target.value})} 
    } 
    else { 
     return false; 
    } 
    } 
    value={this.state.and_} 
    errorText={this.state.and_error} 
    floatingLabelText="And" 
/>