React表单onSubmit失效且输入框无法输入空格问题求助

嘿，我来帮你搞定这两个头疼的问题！

一、输入框不能输入空格？大概率是处理函数做了多余过滤 #

看你代码里有handleChangeName这类输入处理方法，十有八九是在更新state的时候不小心用了trim()或者正则把空格干掉了。比如如果你写了：

handleChangeName(e) {
  this.setState({ name: e.target.value.trim() }); // 这里trim会把所有空格去掉！
}

那自然输不了空格。解决办法很简单：把输入时的trim()去掉，如果要限制首尾空格，放到表单提交的时候再处理就好，别在用户输入时就拦截。

二、onSubmit事件失效？从这三个地方排查 #

1. 表单是否正确绑定onSubmit，且阻止了默认行为
   确保你的<Form>组件绑定了onSubmit={this.handleUserUpdate}，而且在handleUserUpdate里一定要加e.preventDefault()——不然浏览器会默认刷新页面，看起来就像事件没触发一样：

   handleUserUpdate(e) {
     e.preventDefault(); // 必须加！阻止页面跳转
     // 你的提交逻辑写在这
   }
   

2. 提交按钮的type是不是submit？
   用react-bootstrap的<Button>时，默认type是"button"，这种点击不会触发表单的onSubmit。必须显式设置type="submit"：

   <Button type="submit" variant="primary">提交</Button>
   

3. 检查自定义组件的属性传递
   你用了FieldGroup自定义组件，要确保它把onChange和value正确传递给内部的<input>元素。如果FieldGroup里没把这些属性透传，输入事件和值绑定都会失效。

修正后的完整代码示例 #

import React, { Component } from "react";
import FieldGroup from "./FieldGroup";
import { connect } from "react-redux";
import { Form, Button } from "react-bootstrap";

class UserUpdateForm extends Component {
  constructor(props) {
    super(props);
    this.handleUserUpdate = this.handleUserUpdate.bind(this);
    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeNickname = this.handleChangeNickname.bind(this);

    this.state = {
      name: "",
      nickname: ""
    };
  }

  handleChangeName(e) {
    // 去掉trim，允许输入空格
    this.setState({ name: e.target.value });
  }

  handleChangeNickname(e) {
    this.setState({ nickname: e.target.value });
  }

  handleUserUpdate(e) {
    e.preventDefault();
    // 这里写你的提交逻辑，比如调用redux action
    console.log("提交的数据：", this.state);
  }

  render() {
    return (
      <Form onSubmit={this.handleUserUpdate}>
        <FieldGroup
          label="用户名"
          type="text"
          value={this.state.name}
          onChange={this.handleChangeName}
        />
        <FieldGroup
          label="昵称"
          type="text"
          value={this.state.nickname}
          onChange={this.handleChangeNickname}
        />
        <Button type="submit" variant="primary">更新用户信息</Button>
      </Form>
    );
  }
}

export default connect(null, null)(UserUpdateForm);

内容的提问来源于stack exchange，提问作者Yarik Lyakh