0

Подскажите как в поле input можно запретить ввод пробела первым символом? Так же не совсем понимаю, как запретить ввод не более одного пробела подряд? Жду ваши идее и предложения. Премного благодарен, за Ваше потраченное время!

function check(event)
{
    if (event.keyCode==32)
    {
        alert('Ой!');
        return false;
    }
}

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'Vasya'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    input.value = input.value.replace(/^\s|[.`":'$@~;]/g, '');
  }

  handleSubmit(event) {
    alert('Your name is: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Enter you name:
          <input value={this.state.value} onChange={this.handleChange} onkeypress="return check(event);">
          
          </input>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="root"></div>

1 ответ 1

3

Зачем вам return false? Вы все делаете через стейт - из него инпут берет свое value и в него же вы и записываете данные. Если в handleChange не пропускать в стейт не нужные символы, то и в поле ввода их никогда не увидите.

  handleChange({target}) {
    const value = target.value.trim().replace(/ +/g, ' ')
    this.setState({value});
  }

PS

Вот это вообще ничего не делает input.value = input.value.replace(/^\s|[.":'$@~;]/g, '');, откуда реакт узнает что такое input

PPS

Вместо того, чтобы биндить каждые раз контекст методу(this.handleSubmit = this.handleSubmit.bind(this)), можно использовать стрелочные функции (handleChange = event => {....}), они не будут заменять контекст, и в this останется ссылка на ваш класс

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.