が反応し、ブートストラップと反応し-Reduxのフォームを

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を追加し、FormControlコンポーネントにその小道具を追加するために必要な私のrenderField方法で

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

、その後に変更するために必要なバイオフィールド上のように、私は、componentClass小道具がありませんでした。私は私が渡されたとき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

あなたはまた、FormControl straightawayでControlを使用することができます。

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;