javascript - 通过 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'

我组合了 reducer :

let allReducers = combineReducers({form: reduxFormReducer })

我创建了一个操作类型:

export const FORM_ADD = 'FORM_ADD'

我也创建了一个 Action 创建者:

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

但是现在，我不知道，我应该如何使用我的 Action 创建者和 reducer 检索和发送表单的值。我知道我必须恢复表单的值然后发送它。

仅供引用，我能够通过这样做恢复我的 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))

我需要你的帮助，请原谅我的英语! :)

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”填写第一个和第二个字段，那么当我按下提交按钮时，我将收到一 strip 有 {firstName: “Test1”，姓氏:“Test2”}。

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