React js Запрет ввода пробела

281

03 ноября 2018, 01:40

Подскажите как в поле 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>

Answer 1

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

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

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

PPS

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