Как задать ограничение на ввод символов?

Question

[testtoster]

Есть поле вы которое вводятся символы. Как сделать так, чтобы когда пользователь вводил менее 6 символов ему выдавалось сообщение об этом?

constructor(props) {
    super(props);
    this.showText = this.showText.bind(this);
    this.showText2 = this.showText2.bind(this);
  };

  showText2(e) {
    this.setState({ text2: e.target.value });
  }

  <input defaultValue={this.showText} onInput={this.showText2} />

Answer 1

[Сергей Сунцев]

Тут даже реакт не нужен. Просто можно добавить html5 атрибут

<input type="text" name="name" minlength="6" maxlength="10" size="10">

UPD
И можно конечно добавить событие onBlur

constructor(props) {
    super(props);
    this.showText = this.showText.bind(this);
    this.showText2 = this.showText2.bind(this);
  };

  showText2(e) {
    this.setState({ text2: e.target.value });
  }

  onFocusOff = (e) => {
    if(this.state.text2.length < 6){
      this.setState({ alert: "Не менее 6 символов" });
    }
  }

  <input defaultValue={this.showText} onBlur={this.onFocusOff} onInput={this.showText2} />
  {this.state.alert && <p>{this.state.alert}</p>}

Comments

[testtoster]

Суть задачи сделать именно так, чтобы если пользователь ввел менее 6 символов, то на экране вывелось сообщение об этом. Задача учебная)) Проблема заключается в том, что поле я создал и символы выводить на экран даже могу, но не могу просто понять как прописать в данном случае ограничение на количество выводимых символов

[Петр Мухуров]

testtoster,

return (
  ...
  <input defaultValue={this.showText} onInput={this.showText2} />
  {this.showText2.length < 6 && <MyWarningMessage />}
);