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'

我合并了reducer：

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

我需要你的帮助PAYASEEEEEE，我很抱歉我的英语！：）

Answer 1

当您在组件上使用<?php // The Query $the_query = new WP_Query( $args ); // The Loop if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); echo get_the_title(); // --------------------- // YOUR TABLE LOGIC HERE // --------------------- } echo '</ul>'; /* Restore original Post Data */ wp_reset_postdata(); } else { // no posts found }功能时，Redux-From会自动为您提供reduxForm功能，您可以通过该功能传递功能。当您提交表单时，该函数将被赋予一个对象，其中所有表单值都可通过其键（handleSubmit属性）获得。

例如（runnable JSFiddle demo here ）：

name

所以在这个简单的形式示例中，如果我使用＆＃34; Test1＆＃34;填写第一个和第二个字段。和＆＃34; Test2＆＃34;，然后当我按下提交按钮时，我将收到一条带有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') );的控制台消息。

如果你有一个动作调度和/或你想要运行的API调用，那么你只需将另一个函数传递给{firstName: "Test1", lastName: "Test2"}。

通过redux-form和reducer以及action creator

1 个答案: