Удалить пробелы с обоих концов строки внутри формы

Question

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

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

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

Answer 1

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

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

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

formatInput = (event) => {
  const attribute = event.target.getAttribute('name')
  this.setState({ [attribute]: event.target.value.trim() })
}