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

IT技术 javascript reactjs forms trim
2021-05-03 11:05:15

我有一个接收名字和姓氏的简单表单,我需要删除字符串开头和结尾的空格。我可以用这个.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>
  );
}
1个回答

而不是 trimming onChange,在onBlur回调中做到这一点

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

可能看起来像这样的地方:

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