通過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形式的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))

我需要您的幫助，我很抱歉我的英語！！！ :)

Answer 1

在組件上使用reduxForm函數時，Redux-From將自動為您提供handleSubmit函數，您可以傳遞該函數。 提交表單時，將向該函數提供一個對象，該對象的所有表單值都可以通過其鍵（ name屬性）使用。

例如（ 此處可運行JSFiddle演示 ）：

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"}的控制台消息{firstName: "Test1", lastName: "Test2"} 。

如果您有一個動作分派和/或您想運行一個API調用，那么您只需將另一個函數傳遞給handleSubmit 。