В React.Js я хочу проверить длину и ограничить числовой, буквенно-цифровой и символ подчеркивания в текстовом поле?

Я работаю над проектом 'React.js'. Я хочу создать 3 текстовых поля, где 1-е текстовое поле - я хочу вставить только шестнадцатеричные значения. Он должен принимать цифры от 0 до 9 и буквы от AF и двоеточие. Он должен принимать только 23 символа (цифры, буквы от AF и двоеточие).

2-е текстовое поле - должно быть только шестнадцатеричные значения.

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

}
Источник

3 ответа

Я предлагаю вам использовать React 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

Источник

На самом деле, это совсем не сложно. Вам нужно только позаботиться об извлечении разрешенных символов из текстового ввода, ограничить его длину,... Если честно, это никак не связано с 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/

Источник

Ниже представлена ​​рабочая демонстрация полной универсальной Inputкомпонент, который имеет свой ум, используя атрибут шаблона HTML5 и блокируя нежелательный контент в соответствии с регулярным выражением, определенным в pattern опора:

Источник
Другие вопросы по тегам