У меня есть простая форма, которая получает имя и фамилию, и мне нужно удалить пробелы в начале и конце строки. Я могу сделать это с помощью метода .trim(), но поскольку это форма, она не позволяет мне писать имя, состоящее из двух слов, например Ана Мария, потому что это не позволяет мне нажимать клавишу пробела в конец слова. Как я могу удалить пробелы с обеих сторон строки, но все же разрешить нажимать пробел и писать более одного слова?

enter image description here

Это компонент:

export default function ScheduleInput(
  { label, required, onChange, value, ...extraProps },
) {
  return (
    <div className="item_container">
      {label}:
      {required &&
        <span style={{ color: 'red' }}> *</span>
      }
      <br />
      <input
        type="text"
        onChange={onChange}
        value={value.trim()}
        {...extraProps}
      />
    </div>
  );
}
9
Liz Parody 12 Сен 2018 в 00:15

1 ответ

Лучший ответ

Вместо того, чтобы обрезать onChange, сделайте это в обратном вызове onBlur:

<input onBlur={this.props.formatInput} {...} />

Где это может выглядеть примерно так:

formatInput = (event) => {
  const attribute = event.target.getAttribute('name')
  this.setState({ [attribute]: event.target.value.trim() })
}
15
coreyward 11 Сен 2018 в 21:20