In React.Js möchte ich die Länge validieren und numerische, alphanumerische und Unterstreichungssymbole im Textfeld einschränken?

Question

Ich arbeite an 'React.js' Projekt. Ich möchte 3 Textfelder erstellen, wo, 1. Textfeld - Ich möchte nur Hexadezimalwerte einfügen. Es sollte die Zahlen von 0-9 & Buchstaben von A-F & Doppelpunkt akzeptieren. Es sollte nur 23 Zeichen (Zahlen, Buchstaben von A-F & Doppelpunkt) akzeptieren.

2. Textfeld - Es sollten nur Hexadezimalwerte verwendet werden.

3. Textfeld - Es sollte nur alphanumerische Werte akzeptieren (nur Zahlen &
Buchstaben).

4. Textfeld - Nur Buchstaben.

Hinweis: Sonderzeichen sollten nicht akzeptiert werden.

Bitte helfen Sie mir, dies zu lösen.

Beispielcode:

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

Ich schlage vor, Sie onKeyPress Veranstaltung mit regexp Prüfungen Reagieren auf (siehe unten Beispiel und die jsbin Link)

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

Eigentlich ist es nicht überhaupt kompliziert. Sie müssen nur darauf achten, erlaubte Zeichen aus der Texteingabe zu extrahieren, seine Länge zu begrenzen, ... Um ehrlich zu sein, das ist nicht mit React in irgendeiner Weise verbunden - es ist pures Javascript.

Lassen Sie sich mit einem einfachen Funktion beginnt die Teilkette durch Muster aus Zeichenfolge extrahiert

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

Dann wickelt diese Funktion in Funktionen, die 1 für Muster Probleme zu lösen, 2, 3 und 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]+"); 

Es Super einfach zu Länge der Zeichenfolge zu begrenzen

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

Dann erstellen Sie Ihren Text inp Tauschen Sie die Komponenten aus, achten Sie auf Änderungen und aktualisieren Sie den Status nach Bedarf.

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> 
    ) 
    } 
}); 

Voll funktions Geige hier https://jsfiddle.net/69z2wepo/36536/

Original-Lösung aufgeteilt in getrennte Komponenten https://jsfiddle.net/69z2wepo/36654/