接下来编写一个通用的`<FormInput> `组件，它负责根据传入的属性渲染对应的组件。通过该组件产生的输入组件具有一致的行为（都提供了用于取值的getValue() 方法）。 在发现工具中编写测试（如图6-6 所示）： ``` <h2>Form inputs</h2> <table><tbody> <tr> <td>Vanilla input</td> <td><FormInput /></td> </tr> <tr> <td>Prefilled</td> <td><FormInput defaultValue="it's like a default" /></td> </tr> <tr> <td>Year</td> <td><FormInput type="year" /></td> </tr> <tr> <td>Rating</td> <td><FormInput type="rating" defaultValue={4} /></td> </tr> <tr> <td>Suggest</td> <td><FormInput type="suggest" options={['red', 'green', 'blue']} defaultValue="green" /> </td> </tr> <tr> <td>Vanilla textarea</td> <td><FormInput type="text" /></td> </tr> </tbody></table> ```  图6-6：表单输入 `<FormInput>` 组件的实现（js/source/components/FormInput.js）和以往类似，使用了import、export 以及用于验证属性的propTypes： ``` import Rating from './Rating'; import React, {Component, PropTypes} from 'react'; import Suggest from './Suggest'; class FormInput extends Component { getValue() {} render() {} } FormInput.propTypes = { type: PropTypes.oneOf(['year', 'suggest', 'rating', 'text', 'input']), id: PropTypes.string, options: PropTypes.array, // 用于<option>选项列表的自动补全功能 defaultValue: PropTypes.any, }; export default FormInput ``` render() 方法包含一个大的switch 语句块，负责把输入元素创建的工作分配给某一个具体的组件。如果没有匹配到自定义组件，则默认渲染内建的DOM 元素`<input>` 与`<textarea>`： ``` render(){ const common={ //通用属性 id:this.props.id, ref:'input', defaultValue:this.props.defaultValue }; switch (this.props.type) { case 'year': return ( <input {...common} type="number" defaultValue={this.props.defaultValue||new Date().getFullYear()} /> ); case 'suggest': return <Suggest {...common} options={this.props.options}/>; case 'rating': return ( <Rating {...common} defaultValue={parseInt(this.props.defaultValue,10)}/> ); case 'text': return <textarea {...common}>; default: return } } ``` 注意到ref 属性的使用了吗？事实上，在获取输入框的取值时，ref 属性是比较方便实用的： ``` getValue(){ return 'value' in this.refs.input ?this.refs.input.value :this.refs.input.getValue(); } ``` 在这里，this.refs.input 是底层DOM 元素的一个引用。对于原生DOM 元素，比如`` 和``， 通过this.refs.input.value 获取value 属性值（ 就像原生的DOM 操作方法document.getElementById('some-input').value 那样）。对于自定义组件， 比如`<Suggest>` 和`<Rating>`，则调用它们本身的getValue() 方法。