我通过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
不同。
我该怎么做?