1

連絡先とメモの2つのモデルがあります。メモは連絡先に属します。

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">
4

3 に答える 3

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,  //  <---------------------
      }
    }
  }
.....
于 2016-06-29T07:28:20.043 に答える