如何更改渲染输入以在redux-form中选择?

时间:2016-05-17 21:54:00

标签: javascript forms reactjs react-jsx redux-form

我通过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)

示例: 如果select的值是child.type == contactTypes[2].key,那么我需要渲染select  services作为选项,但与PureInput的默认child.description不同。

我该怎么做?

0 个答案:

没有答案