通过 redux-form 和 reducer 和 action creator 发送数据表单

Question

你好， 如何发送我的 redux 表单的字段值？实际上，我需要使用 reducer 和 actionCreator 将表单字段的值发送到数据库中。

我的表格：

import React, {PropTypes} from 'react';

class myformClass extends React.Component {
 render(){
  return(
    <form>
      <Field
        name="inputName"
        ref="inputName"
        hintText="Le nom du flux" 
        floatingLabelText="Nom du input" 
        component={renderTextField} 
        fullWidth={true}
      />
      <Field
        label="inputComment" 
        name="inputComment"
        ref="inputComment"
        hintText="La description du input"
        floatingLabelText="Commentaire" 
        component={renderTextareaField} 
      />
    </form>
  )
 }
}

export default withRouter(reduxForm({
    form: 'myForm'
})(myformClass))

在我的索引应用程序中，我导入了“redux-form 的 reducer”：

import { reducer as reduxFormReducer } from 'redux-form'

我结合了减速器：

let allReducers = combineReducers({form: reduxFormReducer })

我创建了一个动作类型：

export const FORM_ADD = 'FORM_ADD'

我也创建了一个动作创建者：

export function addForm(dataForm) {
  return {
     type: types.FORM_ADD ,
     data: {
       INPUT_NAME: dataForm.inputName, 
       INPUT_COMMENT: dataForm.inputComment
     }
  }
}

但是现在，我不知道，我应该如何使用我的动作创建者和减速器来检索和发送我的表单的值。我知道我必须恢复我的表单的价值，然后发送它。

作为参考，我可以通过这样做来恢复我的 redux-form 的价值：

import React, {PropTypes} from 'react';

class myformClass extends React.Component {

  static contextTypes = {store: PropTypes.object}

  getValMyForm = () => {
    const { store } = this.context
    const state = store.getState()
    let valueFormFLow = getFormValues('myForm')(state)
    return valueFormFLow;
  }
}

export default withRouter(reduxForm({
    form: 'myForm'
})(myformClass))

我需要您的帮助 PLEASEEEEEE，对不起我的英语！！！ :)

Answer 1

当你在你的组件上使用reduxForm 函数时，Redux-From 会自动给你一个handleSubmit 函数，你可以传递一个函数。当您提交表单时，该函数将获得一个对象，其中所有表单值都可以通过其键（name 属性）获得。

例如（可运行JSFiddle demo here）：

const MyForm = ({handleSubmit}) => (
 <form onSubmit={ handleSubmit((formData) => console.log(formData)) } >
   <div>
     First Name
     <Field name={`firstName`} component='input' type='text' /><br />
     Last Name
     <Field name={`lastName`} component='input' type='text' /><br />
    </div>
   <input type="submit" value="submit" />
  </form>
)

const MyTestForm = reduxForm({
  form: 'myForm'
})(MyForm);

// END EXAMPLE
ReactDOM.render(
  <Provider store={store}>
    <MyTestForm />
  </Provider>,
  document.getElementById('root')
);

所以在这个简单的表单示例中，如果我用“Test1”和“Test2”填写了第一个和第二个字段，那么当我按下提交按钮时，我将收到一条带有{firstName: "Test1", lastName: "Test2"} 的控制台消息。

如果您有一个动作调度和/或您想要运行的 API 调用，那么您只需将另一个函数传递给 handleSubmit。