使用 React Redux 提交 FORM 数据的最佳方式？

Question

我对这个简单的问题有点困惑！我想简单地获取我的表单数据，验证它，提交它并向 Express API 提交一个发布请求。但在此之前，我认为我对如何实现这一点没有透彻的了解。我查看了this 问题和these 以及其他一些问题，但我不确定这是最好的方法。

这就是我假设的方式：

我为注册页面创建了一个 React 组件。 （为演示而简化）

class SignupForm extends Component {
    constructor(props){
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onSubmit(val){
        debugger;
    }
    render(){
        return (
            <form onSUbmit={ (e)=> this.onSubmit(e) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

当按钮被点击时，OnSubmit() 函数触发，它将被传递 JSON 数据。

{
   "name": "Kanye",
   "surname": "West",
   "email":"yeezy@goodmusic.com",
   "password":"notsurehowthiswillwork"
}

我可以在哪里触发我的操作 SignupAction()，这将对我的 API 进行 AJAX 调用，然后更新我的减速器。

在使用像 react-redux-form 或 redux-form 这样的库时，困惑会成倍增加。我只想简单地为name、surname、email 和password 提供一个模型或其他东西，但我觉得这些库一旦开始拥有自己的减速器就被过度设计了：

const store = createStore(combineForms({
   user: initialUser,
}));

我的另一个选择是：

class SignupForm extends Component {

    constructor(props){
        super(props);
        this.state.form = {
            name : '',
            surname: '',
            email: '',
            password: ''
        }
    }
    onSubmit(e){
        e.preventDefault();
        this.props.SignupAction(this.state.form);
        // then reset the state agian to '' 
    }
}

但是，我的问题是……这会影响性能吗？如果会，为什么？

Answer 1

处理表单的非常简单的方法：

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;

Answer 2

我建议使用redux-form。它为您提供以下选项：

1. 输入验证
2. 输入的不同类型，包括日期和文件上传
3. 提供在验证成功后调用的 onSubmit 方法（这是您调度操作以调用 API 和更新状态的点）

但如果仍然不想使用（我强烈建议使用它），您可以做的是在表单提交时验证您的数据并在您的容器中发送一个操作。因此，将您的数据作为参数从您的组件传递到您的容器，您可以在其中调度一个操作调用 post/put API（在 redux 形式中，您不需要传递任何内容，您可以直接从存储中读取）。

    onSubmit(val){
        debugger;
    }
    render(){
        const { onSubmit } = this.props //pass onSubmit from 
        return (
            <form onSubmit={ (e)=> {onSubmit} ) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

容器：

mapDispatchToProps(dispatch){
   return {
    onSubmit => {
     //dispatch action
     }
  }