React.Jsでは、長さを検証し、テキストフィールドに数値、英数字、アンダースコアを制限したいのですか？

Question

私は 'React.js'プロジェクトに取り組んでいます。 3つのテキストフィールドを作成します。 1番目のテキストフィールド - 16進値のみを挿入します。 A-F &コロンからの0-9 &の文字を受け入れる必要があります。 23文字（数字、A-F &コロンからの文字）のみを受け入れる必要があります。

第2テキストフィールド - 16進値のみにする必要があります。

第3テキストフィールド - アルファ数値のみを受け入れる必要があります（数値は&
文字のみ）。

4番目のテキストフィールドのみの文字。

注：特殊文字は使用しないでください。

これを解決するために私を助けてください。

サンプルコード：

constructor(props) { 
    super(props);this.state = {showModal: true}; 
    this.modalFooter = this.modalFooter.bind(this); 
    this.modalBody = this.modalBody.bind(this); this.updateState = this.updateState.bind(this);  
}; 

modalFooter() { 
    return (
    <div> 
     <BButton name="Cancel" onClickHandler={() => { this.setState({ showModal: false }) }} /> 
    </div>); 
} 

modalBody() { 
    return (
    <div> 
     <br className="Class"> 
     <br> Hex Value: <input type="text" className="Class" formnovalidate="return isNumber(event)" 
      maxLength="23" placeholder="" /></br> 
     <br> Addr: <input type="text" className="Class" maxLength="6" name="" 
      placeholder="" /></br><br> Name: <input type="text" className="Class" id="Number" 
      maxLength="64" 
      name="" placeholder="" /></br> 
     </br> 
    </div> 
); 
} 

updateState(e) { 
    this.setState({data: e.target.value}); 
} 

render() { 
    let body = this.modalBody(); 
    let footer = this.modalFooter(); 
    let modal = <BModal header="Add Message" 
    body={body} 
    footer={footer} /> 
    return (
    <div className="page-title"> 
     <center> 
     <h3> Sample Program </h3> 
     </center> 
     <hr className="horizontal-line"></hr> 

     <div> <font color="grey"><input type="text" value={this.state.data} 
     onClick={() => { this.setState({ showModal: true }) }} /></font> 
     {this.state.showModal ? modal : ""} 
     </div> 
    </div>); 

} 

Answer 1

私はあなたが使用することをお勧めは、正規表現の検証とonKeyPressイベント（下記の例とjsbinのリンクを参照してください）

var Form = React.createClass({ 

    firstMethod(e) { 
    const re = /[0-9A-F:]+/g; 
    if (!re.test(e.key)) { 
     e.preventDefault(); 
    } 
    }, 

    secondMethod(e) { 
    const re = /[0-9A-F]+/g; 
    if (!re.test(e.key)) { 
     e.preventDefault(); 
    } 
    }, 

    thirdMethod(e) { 
    const re = /[0-9a-fA-F]+/g; 
    if (!re.test(e.key)) { 
     e.preventDefault(); 
    } 
    }, 

    fourthMethod(e) { 
    const re = /[a-fA-F]+/g; 
    if (!re.test(e.key)) { 
     e.preventDefault(); 
    } 
    }, 

    render() { 
    return (
     <form> 
     <input ref="first" onKeyPress={(e) => this.firstMethod(e)} /> 
     <input ref="second" onKeyPress={(e) => this.secondMethod(e)} /> 
     <input ref="third" onKeyPress={(e) => this.thirdMethod(e)} /> 
     <input ref="fourth" onKeyPress={(e) => this.fourthMethod(e)} /> 
     </form> 
    ); 
    } 
}); 

ReactDOM.render(
    <Form />, 
    document.getElementById('example') 
); 

http://jsbin.com/juyakaqawe/edit?html,js,output

Answer 2

は実際に、それはありませんリアクト全く複雑です。あなたは、テキストの入力から許可された文字を抽出し、その長さを制限してください... 正直言って、これはどのような方法でもReactに関連していません - それは純粋なJavascriptです。

のは

const extract = (str, pattern) => (str.match(pattern) || []).pop() || ''; 
// Usage 
extract("01az", "[0-9a-fA-F]+") // "01a" 

次にパターンで文字列から部分文字列を抽出し、簡単な関数から始めましょう、1、2、3、4

const extractHexadecimalWithColon = (str) => extract(str, "[0-9a-fA-F:]+"); 

const extractHexadecimal = (str) => extract(str, "[0-9a-fA-F]+"); 

const extractAlphanum = (str) => extract(str, "[0-9a-zA-Z]+"); 

const extractAlpha = (str) => extract(str, "[a-zA-Z]+"); 

それをするためのパターンの問題を解決するための機能には、この機能をラップ文字列の長さを極限まで簡単に制限する

const limitLength = (str, length) => str.substring(0, length); 

次に、必要に応じて変更を監視し、状態を更新します。

var App = React.createClass({ 
    getInitialState() { 
    return {}; 
    }, 

    setA(e) { 
    this.setState({ 
     a: limitLength(extractHexadecimalWithColon(e.target.value), 23), 
    }); 
    }, 

    setB(e) { 
    this.setState({ 
     b: extractHexadecimal(e.target.value), 
    }); 
    }, 

    setC(e) { 
    this.setState({ 
     c: extractAlphanum(e.target.value), 
    }); 
    }, 

    setD(e) { 
    this.setState({ 
     d: extractAlpha(e.target.value), 
    }); 
    }, 

    render() { 
    return (
     <div> 
     <div> 
      Hexadecimal, max 23 chars, colon allowed<br/> 
      <textarea value={this.state.a} onChange={this.setA} /> 
     </div> 

     <div> 
      Hexadecimal only, no length restriction<br/> 
      <textarea value={this.state.b} onChange={this.setB} /> 
     </div> 

     <div> 
      Alphanumeric<br/> 
      <textarea value={this.state.c} onChange={this.setC} /> 
     </div> 

     <div> 
      Letters only<br/> 
      <textarea value={this.state.d} onChange={this.setD} /> 
     </div> 
     </div> 
    ) 
    } 
}); 

全作業フィドルここhttps://jsfiddle.net/69z2wepo/36536/

オリジナルソリューションスプリット別々のコンポーネントにhttps://jsfiddle.net/69z2wepo/36654/