如何让redux-form通过输入属性

我正在使用一个反应组件库，为redux-form字段提供验证 . 我的问题是他们没有将html输入属性传递给他们渲染的输入元素 . 需要更改以允许它们将大小或maxLength等属性传递给input元素？

以下是我使用以下组件之一的方法：

<Field
component={TextInput}
type="text"
required={true}
initialValue={this.props.initialValues.name}
name="name"
id="name"
size="65"
maxLength="100"
/>

这是定义TextInput的代码：

import React from 'react';
import PropTypes from 'prop-types';

import { FormControl, FormGroup, HelpBlock, InputGroup } from 'react-bootstrap';

import { validateField } from '../../decorators/forms/validates';
import { inputPropTypes, getInputProps } from './props';


function Input(props) {
  const errors = props.messages.map((msg) => <HelpBlock key={msg}>{msg}</HelpBlock>);

  return (
    <FormGroup
      validationState={props.validationState}
    >
      <InputGroup>
        <FormControl
          {...getInputProps(props)}
        />
      </InputGroup>
      {errors}
    </FormGroup>
  );
}

Input.defaultProps = {
  type: 'text',
};

Input.propTypes = inputPropTypes;

/**
 * A component that allows entering text.

 * Default validation options: `{sanitizers: ['trim']}`

 * Default props: `{type: 'text'}`
 * @namespace TextInput
 * @memberof Simpl.components.forms
 * @type {ReactElement}
 * @extends React.Component
 */
export const TextInput = validateField({
  sanitizers: ['trim'],
})(Input);

export default TextInput;

这是定义getInputProps（）的代码：

import React from 'react';
import PropTypes from 'prop-types';

export const inputPropTypes = {
  errors: PropTypes.array,
  warning: PropTypes.array,
  sanitizers: PropTypes.array,
  formatters: PropTypes.array,
  messages: PropTypes.array,
  validationState: PropTypes.string,

  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  readOnly: PropTypes.bool,
  required: PropTypes.bool,
  type: PropTypes.string,
  value: PropTypes.any,

  disabled: PropTypes.bool,
};

export const reduxFormPropTypes = {
  error: PropTypes.any,
  handleSubmit: PropTypes.func,
  input: PropTypes.object,
  label: PropTypes.string,
  meta: PropTypes.object,
  pristine: PropTypes.bool,
  reset: PropTypes.func,
  submitting: PropTypes.bool,
  type: PropTypes.string,
};

export function getInputProps(props) {
  return {
    id: props.id,
    name: props.name,
    onBlur: props.onBlur,
    onChange: props.onChange,
    onFocus: props.onFocus,
    readOnly: props.readOnly,
    required: props.required,
    type: props.type,
    value: props.value,

    max: props.min,
    min: props.max,
    step: props.step,
  };
}

===========================

在调整Tomasz后，建议更改getInputProps以从props中删除非输入属性：

export function getInputProps(props) {
  const inputProps = Object.assign({}, props);
  delete inputProps.messages;
  delete inputProps.validationState;
  delete inputProps.hasReduxForm;
  delete inputProps.decimalPlaces;
  return inputProps;
}

FormControl生成的输入元素仍然没有size和maxLength属性 . 这似乎是朝着正确方向迈出的一步 .

记录传递给TextInput的props，清楚地表明size和maxLength属性没有到达它 . 那么如何让redux-form通过额外的输入属性呢？

新增09-OCT-2017

我尝试将额外的输入属性添加到Field标签props属性中 . 他们仍然没有被传递到我的组件 .

作为最后的手段，我创建了一个我的组件的副本，它定义了额外输入属性的默认值 . 这解决了我当前的问题，但没有回答这个问题 .