使用React Redux提交表单数据的最佳方法是什么？

Question

我在这个简单问题上有些困惑！我想要简单地获取我的表单数据，验证它，提交并发送一个Post请求到Express API。但在此之前，我觉得我没有彻底理解如何完成这个过程。我看了这个问题和这些以及其他一些问题，但我不确定这是最好的方法。

我认为应该这样做：

我为注册页面创建一个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":"[e-mail]",
   "password":"notsurehowthiswillwork"
}

我可以通过触发我的SignupAction()来进行AJAX调用以更新我的reducers。当涉及使用像react-redux-form 或者redux-form这样的库时，困惑会加倍。我只想要一个为name, surname, email和password的模型或者类似的东西，但是我觉得这些库过于复杂，因为它们开始有了自己的reducer。

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 '' 
    }
}

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

- dsomel21

---

不会影响您的性能。在这两种情况下，组件将重新渲染相同数量的次数。我相信人们使用redux-form是因为其他好处，比如验证，将所有内容保存在一个地方等。 - niba

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;

- E. Fortes

---

你应该控制好你的输入，不要使用引用（refs）。 - nbkhope

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

- Harkirat Saluja

---

我最终决定使用react-redux-form！创建者亲自帮助了我，解决了很多问题！@davidkpiano太棒了！ - dsomel21

react-redux-form 在我看来更好，你应该试一试。 - Georgii Oleinikov