更新！解决了

Question

我有两个型号 - 联系和注意。注释属于联系人。

我正在尝试在提交函数中找到引用contactId的方法。

我已将来自父母的contactId传递给表单：

// parent.js
<NoteNewForm contactId={contactId} onCancel={onCancelNewNoteClick}/>

在我的表单中，我想在submit函数中使用它。我尝试将其作为参数传递 - 即submit(contactId) - 但这不起作用

const submit = (values, dispatch) => {
  var noteData = Object.assign({}, values)

  var primary = {
    type: "notes",
    attributes: noteData
  }

  // I want to use contactId instead of id: "1"
  var relationships = {
    contact: {
      data: {
        type: "contacts",
        id: "1"
      }
    }
  }

  var params = createFormattedParams(primary, relationships)
  dispatch(createNoteForContact(params))
}

export class NoteNewForm extends React.Component {
  constructor(props) {
    super(props)
    this.getValidationState = this.getValidationState.bind(this)
  }

  getValidationState(isError = false, isTouched = false) {
    if (isError && isTouched) {
      return "error"
    } else {
      return null
    }
  }

  render() {
    const {fields: {subject, details, date}, handleSubmit, onCancel, contactId} = this.props
    var extraProps = omit({...date}, 'value')
    return (
      <form onSubmit={handleSubmit(submit)} noValidate autoComplete="off">
        <Row>
          <Col xs={12} sm={6} smPush={6}>
            <FormGroup controlId="date"
                       validationState={this.getValidationState(date.error, date.touched)}>
              <ControlLabel>Date</ControlLabel>
              <DateTimeField
                inputProps={extraProps}
                dateTime={date.value != "" ? date.value : moment().format('YYYY-MM-DD')}
                format="YYYY-MM-DD" inputFormat="DD-MM-YYYY" mode="date"
                onChange={value => date.onChange(value)}
                maxDate={moment()}
              />
              {date.touched && date.error &&
              <HelpBlock>{date.error}</HelpBlock>
              }
              <FormControl.Feedback />
            </FormGroup>
          </Col>
          <Col xs={12} sm={6} smPull={6}>
            <FormGroup controlId="subjectText"
                       validationState={this.getValidationState(subject.error, subject.touched)}>
              <ControlLabel>Subject</ControlLabel>
              <FormControl type="text" {...subject}/>
              {subject.touched && subject.error &&
              <HelpBlock>{subject.error}</HelpBlock>
              }
              {!subject.error && !subject.value &&
              <HelpBlock>Required</HelpBlock>
              }
              <FormControl.Feedback />
            </FormGroup>
          </Col>
        </Row>
        <Row>
          <Col xs={12} sm={12}>
            <FormGroup controlId="detailsText"
                       validationState={this.getValidationState(details.error, details.touched)}>
              <ControlLabel>Details</ControlLabel>
              <FormControl type="text" {...details}/>
              {details.touched && details.error &&
              <HelpBlock>{details.error}</HelpBlock>
              }
              {!details.error && !details.value &&
              <HelpBlock>Required</HelpBlock>
              }
              <FormControl.Feedback />
            </FormGroup>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col xs={12}>
            <div className="pull-right">
              <ButtonToolbar>
                <Button type="submit" className="btn-accent">
                  Create
                </Button>
                <Button type="button" onClick={onCancel}>
                  Cancel
                </Button>
              </ButtonToolbar>
            </div>
          </Col>
        </Row>
      </form>
    )
  }
}

NoteNewForm = reduxForm({
  form: 'NoteNewForm',
  fields: ['subject', 'details', 'date'],
  destroyOnUnmount: false,
  validate
})(NoteNewForm)

export default NoteNewForm

我感到茫然......任何想法都会很棒。

更新！解决了

我使用了来自skypecakes的建议和链接，这是工作代码：

// the submit function
const submit = (values, dispatch, contactId) => {
  var noteData = Object.assign({}, values)

  var primary = {
    type: "notes",
    attributes: noteData
  }

  var relationships = {
    contact: {
      data: {
        type: "contacts",
        id: contactId
      }
    }
  }

  var params = createFormattedParams(primary, relationships)
  dispatch(createNoteForContact(params))
}

表格形式：

  <form onSubmit={handleSubmit((values, dispatch) => {submit(values, dispatch, contactId)})} noValidate
        autoComplete="off">

Answer 1

为了传递一些值，你应该使用.bind（null，value）

 <form onSubmit={handleSubmit(submit.bind(null, contactId ))}
       noValidate autoComplete="off">

然后在回调中

const submit = (values, dispatch, contactId  ) => {
....
var relationships = {
    contact: {
      data: {
        type: "contacts",
        id: contactId,  //  <---------------------
      }
    }
  }
.....

Answer 2

在以下问题中深入探讨了这个问题：

Redux-form handleSubmit: How to access store state?

简答：您可以创建自定义提交处理程序或使用mergeprops。自定义提交处理程序似乎更请参阅答案，了解如何使用自定义提交处理程序。

您在mapDispatchToProps()中定义自定义提交处理程序，然后将其命名为：

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}

Answer 3

更好

为什么没有隐藏的表单字段。通过表单组件的initialValues prop设置其值。然后在提交函数中，您只接收所有字段的值作为参数（v6.x.x）

或

您传递到提交函数中调用的表单sendFormData的动作创建者可以在将其传递到表单之前用所需数据进行打包/合成。这样，表单就不需要或不了解数据。它只知道如何收集数据然后发送它。单一责任......例如。

// Container component wrapping form: Let the code do the talking.... submitNote = (formValues) => { this.props.createNoteThunk(this.props.contactId, formValues); } render() { return ( <YourForm submitNote={this.submitNote} /> ); }

提交redux-form时如何引用prop

更新！解决了

3 个答案: