从表单内字符串两端删除空格-React

Question

我有一个简单的形式，可以接收名字和姓氏，并且需要删除字符串开头和结尾的空格。我可以使用.trim()方法来执行此操作，但是因为它是一种形式，所以它不允许我写一个包含两个单词的名称，例如Ana Maria，因为它不允许我在单词末尾按空格键。如何除去字符串两边的空格，但仍然让我按空格并写多个单词？

这是组件：

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