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

Best way to submit FORM data with React Redux?

提问by dsomel21

I am kind of stumped on this simple issue! I want to simply take my form data, validate it, submit it and submit a post request to the Express API. But before that, I don't think I have a thorough understanding of how to accomplish this. I looked at thisquestion and theseand bunch of others but I am not sure this is the best approach.

我有点被这个简单的问题难住了！我只想获取我的表单数据，验证它，提交它并向 Express API 提交一个 post 请求。但在此之前，我认为我对如何实现这一点没有透彻的了解。我看了这个问题和这些问题，但我不确定这是最好的方法。

This is how I assume it will be undertaken:

这就是我假设将进行的方式：

I create a React Component for the sign up page. (Simplified for demonstration)

我为注册页面创建了一个 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>
        )
    }
}

When button is clicked the OnSubmit() function triggers, where it will be passed JSON data.

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

{
   "name": "Kanye",
   "surname": "West",
   "email":"[email protected]",
   "password":"notsurehowthiswillwork"
}

Where I can trigger my action SignupAction()which will make an AJAX call to my API and then update my reducers.

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

The confusion multiplies when it comes to using libraries like react-redux-formor redux-form. I just want to simply have a model or something for name, surnameemailand password, but I feel that these libraries are over-engineered as soon as they start having their own reducer like:

在使用react-redux-form或redux-form等库时，混淆会成倍增加。我只想为name, surnameemailand简单地创建一个模型或其他东西password，但是我觉得这些库一旦开始拥有自己的减速器，就会被过度设计，例如：

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

MY OTHER OPTION IS:

我的另一个选择是：

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

But, my question is... will this effect performance and if so WHY?

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

采纳答案by Harkirat Saluja

I would suggest using redux-form. It gives you following options:

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

1. Input validation
2. Different types on inputs including date and file uploads
3. Provides a onSubmit method which is called after your validation succeeds (this is point where you dispatch action to call your API and update state)

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

But if still dont want to use (I would strongly recommend using it), what you can do is on form submit just validate your data and dispatch an action in your container. So pass your data as parameters from your component to your container where you dispatch an action calls post/put API (in redux form you dont need to pass anything, you can directly read from the store).

但是如果仍然不想使用（我强烈建议使用它），您可以做的是在表单提交中验证您的数据并在您的容器中发送一个操作。因此，将您的数据作为参数从您的组件传递到您的容器，您可以在其中调度操作调用 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>
        )
    }
}

Container:

容器：

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

回答by E. Fortes

Very easy way to deal with forms:

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

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;