渲染反应，引导和反应，终极版形式

Question

我目前呈现输入控件textarea的控制，像这样：

renderField = function({ input, label, name, type, meta: { touched, error, warning } }) { 
    return (
     <FormGroup> 
     <FormControl {...input} type={type} placeholder={label} /> 
     {touched && error && <span className="error-text">{error}</span>} 
     </FormGroup> 
    ); 
    } 

    render() { 
    const { handleSubmit, pristine, error } = this.props; 

    return (
     <form onSubmit={handleSubmit(this.onSubmit)} className="profile-form"> 
     <Field name="first_name" component={this.renderField} type="text" label="First Name" /> 
     <Field name="last_name" component={this.renderField} type="text" label="Last Name" /> 
     <Field name="bio" component={this.renderField} type="text" label="Bio" /> 
     ... 

     <Button bsStyle="primary" type="submit" disabled={pristine}>Save Changes</Button> 
     </form> 
    ); 
    } 

我想改变生物领域是一个textarea的控制，而不是输入。是否可以在我的renderField函数中执行此操作。我想这样做，而不必复制另一个函数，如renderTextArea，因为这会重复很多参数和引导标记。

我没有在文档或搜索中看到任何这样的例子，但也许我在想它错了。

Answer 1

感谢@elmeister评论，以正确的方向。我错过了componentClass道具，所以在生物领域我只需要改变

<Field name="bio" component={this.renderField} type="text" label="Bio" componentClass="textarea" /> 

，然后在我的renderField方法，我需要componentClass添加作为参数和道具添加到FormControl组件。我并不需要改变输入到外地顺便说一句，我认为componentClass只是覆盖它过去了。

renderField = ({ input, label, name, type, componentClass, meta: { touched, error, warning } }) => { 
    return (
     <FormGroup> 
     <ControlLabel>{label}</ControlLabel> 
     <FormControl {...input} componentClass={componentClass} type={type} placeholder={label} /> 
     {touched && error && <span className="error-text">{error}</span>} 
     </FormGroup> 
    ); 
    } 

Answer 2

你也可以使用Control与FormControl通俗易懂。

export const InputFieldComponent = ({ 
            id, 
            type, 
            label, 
            fieldObject, 
            placeHolder, 
            maxLength, 
            srOnly, 
            messages, validators, onChange}: Props) => (
<FormGroup controlId={id} validationState={fieldObject.valid ? 'success' : 'error'> 
    <ControlLabel srOnly={srOnly}>{label}</ControlLabel> 
    <Control 
    model={`.${id}`} 
    type={type} 
    placeHolder={ placeHolder || label } 
    component={FormControl} 
    maxLength={maxLength} 
    validators={validators} 
    onChange={onChange} 
    > 
    <FormControl.Feedback> <FaCheck /> </FormControl.Feedback> 
    <Errors 
    show="touched" 
    model={`.${id}`} 
    wrapper={ (v) => <HelpBlock>{v}</HelpBlock> } 
    messages={messages} 
    /> 
</FormGroup> 
); 

InputFieldComponent.defaultProps = { 
messages: {}, 
srOnly: false, 
type: 'text', 
maxLength: 255 
} 

export default InputFieldComponent;