渲染反應，引導和反應，終極版形式

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;