使用 react-bootstrap 和 react-redux-form 渲染文本区域控件

Question

我目前正在像这样渲染输入控件：

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>
    );
  }

我想将 bio 字段更改为文本区域控件而不是输入。是否可以在我的 renderField 函数中执行此操作。我想在那里做，而不是必须为 renderTextArea 等另一个函数复制，因为那样会重复很多参数和 bootstrap 标记。

我在文档或搜索中没有看到这方面的任何示例，但也许我的想法是错误的。

Answer 1

感谢@elmeister 的评论引导正确的方向。我缺少 componentClass 道具，所以在 bio 字段上我只需要更改为

<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;

使用 react-bootstrap 和 react-redux-form 渲染文本区域控件

render textarea control with react-bootstrap and react-redux-form

reactjs

react-redux-form