赵走x博客 - 开发者的网上家园

39、构建实例应用：表单：Form

资源编号:76093 书籍 React快速上手开发热度：81

是时候建立一个`<Form> `组件把以上组件组合到一起了

现在你已经拥有了以下组件：
* 自定义输入元素（比如`<Rating>`）；
*  内置的输入元素（比如`<textarea>`）；
* `<FormInput>`，一个根据type 属性创建输入元素的工厂组件。

是时候建立一个`<Form> `组件把以上组件组合到一起了（如图6-7 所示）。

![bs64](https://img.handsomemark.com/2019/11/18/53d15f0c-09ac-11ea-b4d4-0242ac140002.png)
图6-7：表单

表单组件应该是可重用的，因此不应该把关于这个评价应用的逻辑硬编码到该组件中。（更进一步说，关于酒的一切都不应该被硬编码，这样组件才能重新被应用到供用户抱怨上。）这个<Form> 组件可以通过fields 数组进行表单域的配置，而每项表单域的定义内容包括：

*  输入类型type，默认值为input；
* id 属性，以便在随后找到这个输入元素；
*  label 属性，即输入元素的标签内容；
*  可选属性options，用于传递自动建议的内容列表。

此外，<Form> 组件还接收一个包含了默认值的对象，并且配置是否只读的选项，用于阻止用户编辑表单内容：

```
import React,{Component} from 'react'
// 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。
import PropTypes from 'prop-types'

class Form extends Component{
    getData(){}
    render(){}
}

Form.propTypes={
    field:PropTypes.arrayOf(PropTypes.shape({
        id:PropTypes.string.isRequired,
        label:PropTypes.string.isRequired,
        type:PropTypes.string,
        options:PropTypes.arrayOf(PropTypes.string),
    })).isRequired,
    initialData:PropTypes.object,
    readonly:PropTypes.bool
};
export default Form
```

注意这里使用了PropTypes.shape。该方法具体地表明了对象希望接收的内容。这种用法比起概括性地使用fields: PropTypes.arrayOf(PropTypes.object) 或者fields: PropTypes.array 更为严格，而且当其他开发者开始使用你的组件时，这样做有助于减少错误情况的发生。

initialData 是一个键值型的对象字典（{fieldname: value}），与组件的getData() 方法所返回的数据格式一致。

以下是`<Form> `组件的示例用法，放置在发现工具中：
```
<h2>Form</h2>
        <div><Form fields={[
            {label:'Rating',type:'rating',id:'rateme'},
            {label:'Greetings',id:'freetext'}
        ]}
        initialData={{rateme:4,freetext:'Hello'}}/>
        </div>
```
现在回到组件的逻辑实现。这个组件还需要实现getData() 与render() 方法：
```
getData(){
        let data={};
        this.props.fields.forEach(field=>
            data[field.id]=this.refs[field.id].getValue()
        );
        return data;
    }
```
如你所见，这个方法只需要把render() 方法中设置的ref 属性循环一遍，并且调用输入元素的getValue() 方法。

render() 方法本身也相当简单，没有用到任何新语法或新特性：

```
render(){
        return (
            <form className="Form">
                {this.props.fields.map(field=>{
                    const prefilled=this.props.initialData && this.props.initialData[field.id];
                    if(!this.props.readonly){
                        return (
                            <div className="FormRow" key={field.id}>
                                <label className="FormLabel" htmlFor={field.id}>{field.label}</label>
                                <FormInput {...field} ref={field.id} defaultValue={prefilled}/>
                            </div>
                        );
                    }
                    if(!prefilled){
                        return null;
                    }
                    return (
                        <div className="FormLabel" key={field.id}>
                            <span className="FormLabel">{field.label}</span>
                            {
                                field.type==='rating'?<Rating readonly={true} defaultValue={parseInt(prefilled,10)}/>
                                :<div>{prefilled}</div>
                            }
                        </div>
                    );
                },this)}
            </form>
        )
    }
```