1

我通过 redux-form wuth react.js 处理表单。我需要一些有关动态表单中相关下拉字段的帮助。我有反应组件形式：

import React, { Component, PropTypes } from 'react'
import { reduxForm, addArrayValue } from 'redux-form'
import PureInput from '../forms/PureInput'

export const fields = [
  'children[].type',
  'children[].description',
  'children[].value',
]

export const contactTypes = [{key:1,val:'E-mail'},{key: 2, val:"Phone"}, {key:3, val:"Social"}]
export const services = [{key:1, val:"VK"},{key:2, val:"Viber"}, {key: 3, val:"Telegram"}]


class ContactForm extends Component {
  render() {
    const {
      addValue,
      fields: {
        children
      },
      handleSubmit,
      invalid,
      submitting
    } = this.props

    return (
      <div className="container">
        <form onSubmit={handleSubmit} >
          <h3>Основная информация</h3>
          <div className="form-group">
            {!children.length && <div>No Children</div>}
            {children.map((child, index) => (
              <div key={index}>
                <div>
                  <label>Child #{index + 1}</label>
                  <div>
                    <select className="form-control" field={child.type} onChange={()=> _log('changed')} >
                      {contactTypes.map(contactType => <option value={contactType.key} key={contactType.key}>{contactType.val}</option>)}
                    </select>
                  </div>
                  <div>
                    <PureInput type="text" placeholder="type" field={child.description}/>
                  </div>
                  <div>
                    <PureInput type="text" placeholder="description" field={child.value}/>
                  </div>
                  <div>
                    <button type="button" onClick={() => {
                      children.removeField(index)  // remove from index
                    }}><i/> Remove
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <button type="button" onClick={() => children.addField()}><i/> addField</button>
        </form>
      </div>
    )
  }
}

ContactForm.propTypes = {
  fields: PropTypes.object.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  submitting: PropTypes.bool.isRequired
}

export default reduxForm({
  form: 'ContactForm',
  fields
}, undefined, {
  addValue: addArrayValue // mapDispatchToProps (will bind action creator to dispatch)
})(ContactForm)

示例： 如果选择的值是，child.type == contactTypes[2].key那么我需要将选择呈现 services为它的选项，但不像默认PureInput的child.description.

我怎样才能做到这一点？

4

0 回答 0