Question

可能我已经检查了所有关于这个问题的文档和问题，但我仍然无法解决它很长时间。所以，我决定在这里问一下。

正如标题所说我试图从其父组件提交一个redux表单。我尝试将隐藏的提交输入添加到表单中，虽然这不是redux表单方式，但它仍然有效。我该怎么办？

感谢您的帮助。

WorkExperienceForm.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import { renderHorizontalTextField } from '../Fields/TextFields';
import { renderTextAreaFieldWithLabelAndPopover } from '../Fields/TextAreaFields';

const WorkExperienceForm = ({ handleSubmit, onSubmit, shouldHide, form }) => {
    if(shouldHide) return false;    
    return(
        <form onSubmit={ handleSubmit(onSubmit) } className="form-horizontal">
            <Field name="companyName"
                type="text"
                label="Company Name"
                placeholder="Apple inc."
                id="input-company-name"
                component={renderHorizontalTextField} />

            <Field name="title"
                type="text"
                label="Title"
                placeholder="Marketing Specialist"
                id="input-title"
                component={renderHorizontalTextField} />

            <Field name="startYear"
                type="text"
                label="Start Year"
                placeholder=""
                id="input-start-year"
                component={renderHorizontalTextField} />

            <Field name="endYear"
                type="text"
                label="End Year"
                placeholder="Blank if current"
                id="input-end-year"
                component={renderHorizontalTextField} />

            <Field name="summary"
                rows="4"
                label="Summary"
                placeholder="Summary..."
                id="input-summary"
                component={renderTextAreaFieldWithLabelAndPopover} />
        </form>
    )
}

export default reduxForm({
    enableReinitialize: true
})(WorkExperienceForm);

这是父组件

onSubmit(values){        
    this.props.createWorkExperience(values, () => {
        this.props.notify();
    })
}

render(){
    if(!this.props.candidate || !this.props.candidate['workExperience'].length > 0) return this.renderEmptyState();
    const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8'

    return(
        <div>
            { this.renderWorkExperience() }
            <WorkExperienceForm {...this.props} 
                form='postWorkExperienceForm' 
                onSubmit={this.onSubmit}
                shouldHide={!this.state.displayForm} />

            <button type={ this.state.displayForm ? 'submit' : 'button' }
                htmlFor='postWorkExperienceForm'
                className={activeClass} >{ this.state.displayForm ? 'Save' : 'Add Work Experience' }
            </button>
        </div>
    )
}

Answer 1

是的，关于此事的文件很少。

我认为您可能遇到Context个问题。我认为您应该将按钮移动到表单组件并将mySubmit（为了清晰起见，将其从onSubmit重命名）函数传递给带有箭头功能的表单组件onSubmit属性。

mySubmit(formValues){        
    this.props.createWorkExperience(formValues, () => {
        this.props.notify();
    })
}

<WorkExperienceForm {...this.props} 
      form='postWorkExperienceForm' 
      onSubmit={(formValues) => this.mySubmit(formValues)}
      shouldHide={!this.state.displayForm} />

然后在表单组件中将onSubmit包裹在handleSubmit函数中。

<form onSubmit={handleSubmit(onSubmit)}>

以下是我们最近必须使用Redux-Form执行此操作的示例。也许，它会帮助你一些。

注意，我们正在使用FLOW。

父组件：beer.add.component.js
表单组件：beer.add.form.component.js

Live production示例，所以你知道它有效。
注意，SignInForm使用相同的模式。

从父组件提交Redux表单 - 远程提交

1 个答案: