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

我想将生物场更改为textarea控件而不是输入。是否可以在renderField函数中执行此操作。我想在那里做，而不是必须复制另一个函数，如renderTextArea，因为这将复制很多参数和bootstrap标记。

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

Answer 1

感谢@elmeister的评论指引正确的方向。我错过了componentClass道具，因此在生物领域我只需要改为

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

然后在我的renderField方法中，我需要添加componentClass作为参数，并将该prop添加到FormControl组件。我没有必要将输入更改为字段btw，我认为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渲染textarea控件

2 个答案: