Question

说明：
对于学习redux形式我遵循了这个youtube教程here，但是我没有得到作者那里的相同行为（我没有使用他的模板，只是在我的工作模板中实现了他的组件）。

我的期望：
- 在提交后将redux表单输出表单值提供给控制台
- 如果我提交表单，则不会收到请求，但值仅在控制台中打印

我现实中得到的结果：
- Redux表单似乎在初始化步骤中自动提交，当导航到localhost时，我在控制台中得到空表单对象：3000
- 如果我按提交，Redux表格会提出请求，而我仍然没有准备我的后端。

我的代码（仅来自youtube）首先是表单：

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';

class ReduxFormTrial extends Component{
  render(){
  return (
    <form onSubmit={this.props.handleSubmit()}>
      <div>
        <label htmlFor="firstName">First Name Here:</label>
        <Field name="firstName" component="input" type="text"/>
      </div>
      <button type="submit">Submit</button>
    </form>
   )
  }
 }

 ReduxFormTrial = reduxForm({form: 'contact'})(ReduxFormTrial);
 export default ReduxFormTrial;

然后包含它的组件，用于表示：

import React, {Component} from 'react';
import ReduxFormTrial from './reduxformtrial';

export default class ReduxFormHOC extends Component{
  submit = (values) => {
  // print the form values to the console
  console.log(values)
  }
  render(){
   return (
     <ReduxFormTrial onSubmit={this.submit}/>
   )
  }
}

请告诉我们：
- 如何从自动提交中停止redux表单（在初始化时发布空值） - 如何防止它发送get请求？（我希望某处有e.preventDefault（）但我不知道在哪里放它？）

修改
我通过这样编辑我的表单来摆脱这个问题：

<form onSubmit={this.props.handleSubmit(this.props.onSubmit)}>

但也许我正在以错误的方式做所有事情，所以如果有人希望有人建议的话，我还是会等待正确的方式。

提前谢谢。

Answer 1

而不是：

<form onSubmit={this.props.handleSubmit()}>

你应该写：

<form onSubmit={this.props.handleSubmit}>

为什么redux形成自动提交然后得到请求？

1 个答案: