提交Redux表單時如何引用道具

Question

我有兩個模型-聯系人和注釋。 便箋屬於聯系人。

我正在嘗試找到一種在Submit函數中引用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形式的handleSubmit：如何訪問存儲狀態？

簡短的答案：您可以創建自定義的提交處理程序或使用mergeprops。 自定義提交處理程序看起來更干凈。 有關如何使用自定義提交處理程序的信息，請參見答案。

您可以在mapDispatchToProps()定義自定義提交處理程序，然后按以下方式調用它：

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

Answer 3

更好的是

為什么沒有隱藏的表單字段。 通過表單組件的initialValues設置其值。 然后，在Submit函數中，您當然只接收所有字段的值作為參數（v6.xx）

要么

您可以將提交到表單sendFormData中的動作創建者（在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} />
    );
}