提交时如何引用道具 redux-form

Question

我有两个模型——联系方式和备注。一条便条属于一个联系人。

我正在尝试找到一种在提交功能中引用 contactId 的方法。

我已将 contactId 从 parent 传递到表单：

// 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 的建议和 link，这是工作代码：

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

更好

为什么没有隐藏的表单域。通过表单组件的 initialValues 属性设置它的值。然后在提交函数中，您当然只接收所有字段的值作为参数 (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} />
    );
}

Answer 3

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

简短回答：您可以创建自定义提交处理程序或使用 mergeprops。自定义提交处理程序看起来更干净。请参阅有关如何使用自定义提交处理程序的答案。

您在 mapDispatchToProps() 中定义您的自定义提交处理程序，然后这样调用它：

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

提交时如何引用道具 redux-form

How to reference a prop when submitting redux-form

javascript

reactjs

redux

redux-form

更新！下面解决了