In React.Js ich möchte überprüfen Länge und einschränken, Numerisch, alphanumerisch und Unterstrich-symbol im text-Feld?

Arbeite ich an 'React.js' Projekt.
Ich will erstellen 3 Textfelder, wo,
1. Textfeld - möchte ich einfügen, nur hexadezimale Werte.
Es sollten akzeptieren, die zahlen von 0-9 & Buchstaben von A-F & colon.
Es sollten akzeptieren, nur 23 Zeichen(zahlen, Buchstaben von A-F & colon).

2. Textfeld - Es sollte nur Hexadezimale Werte.

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

Briefe).

4. Textfeld Nur Buchstaben.

Hinweis: Sonderzeichen sollte nicht akzeptiert werden.

Bitte helfen Sie mir, diese 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>);

}
Einige code... niemand wird Ihnen die Lösung, ohne dass Aufwand für Sie.
Geben Sie mir einige Ideen-Typen....Eigentlich bin ich neu React.Js.

InformationsquelleAutor Sai | 2016-03-30

  1. 10

    Ich schlage vor, Sie verwenden, Reagieren onKeyPress Veranstaltung mit regexp Prüfungen (siehe Beispiel unten 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

    Vielen Dank für deine Lösung. Aber die Sache ist die, ich muss es schaffen, in eine separate Komponente, und ich rufen Sie es von dort.

    InformationsquelleAutor Anastasia Abakumova

  2. 3

    Eigentlich ist es überhaupt nicht kompliziert. Sie müssen nur aufpassen, erlaubt das extrahieren von Zeichen aus der Texteingabe, Begrenzung der Länge, ...
    Um ehrlich zu sein, dies ist nicht im Zusammenhang zu Reagieren, in irgendeiner Weise - es ist reines Javascript.

    Beginnen wir mit der einfachen Funktion extrahiert den Teilstring von string nach Muster

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

    Dann wickeln Sie diese Funktion in Funktionen, die Muster lösen Probleme für 1, 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 begrenzen, Länge von string

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

    Erstellen Sie dann Ihren text ein-Komponenten, hören Sie die änderungen und aktualisieren Staat als erforderlich.

    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 funktionsfähige Geige, die hier https://jsfiddle.net/69z2wepo/36536/

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

    Vielen Dank für deine Lösung. Aber die Sache ist die, ich muss es schaffen, in eine separate Komponente, und ich rufen Sie es von dort.
    Was ist das problem mit dem übergeben von Werten und onChange Rückrufe auf diese Komponente?
    siehe aktualisierte Reaktion mit einer anderen Geige

    InformationsquelleAutor Andreyco

Schreibe einen Kommentar