通过 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))

在我的索引应用程序中，我导入了 "reducer in redux-form":

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

我组合了减速器：

let allReducers = combineReducers({form: reduxFormReducer })

我创建了一个动作类型：

export const FORM_ADD = 'FORM_ADD'

我也创建了一个 action creator :

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

但是现在，我不知道，我应该如何使用我的 action creator 和 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" 填写了第一个和第二个字段，那么当我按下提交按钮时，我将收到一条控制台消息{firstName: "Test1", lastName: "Test2"}.

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

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

Send data form via redux-form and reducer and action creator

javascript

reactjs

redux

redux-form

react-redux