wie bekomme ich redux-form um die Eingabe-Attribute zu übergeben

Question

Ich arbeite mit einer Bibliothek von react-Komponenten, die Validierung für Redux-Form-Felder bieten. Mein Problem ist, dass sie HTML-Eingabeattribute nicht an die von ihnen gerenderten Eingabeelemente übergeben. Was muss geändert werden, damit Attribute wie Größe oder MaxLength an das Eingabeelement übergeben werden können?

Hier ist, wie ich eine dieser Komponenten bin mit:

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

Dieser Code ist die TextInput- definiert:

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; 

Dies ist der Code, der getInputProps() definiert:

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

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

Nach Anpassung Tomasz Änderung getInputProps auch vorgeschlagen, nicht-Eingang Streifen aus Attribute von Requisiten:

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

die Eingangselemente noch nicht über die Größe und maxLength Attribute von Formcontrol generiert. Dies scheint jedoch ein Schritt in die richtige Richtung zu sein.

Das Protokollieren der Requisiten, die an den TextInput übergeben wurden, machte deutlich, dass die Größe und die maxLength-Eigenschaften es nicht erreichten. Wie erhält man Redux-Form, um die zusätzlichen Eingabeattribute zu durchlaufen?

ADDED 09-OCT-2017 ++++++++++

ich Hinzufügen der zusätzlichen Eingabe versucht Attribute zu einem Feld-Tag Requisiten zuzuschreiben. Sie wurden immer noch nicht an meine Komponente weitergegeben.

Als letzten Ausweg habe ich eine Kopie meiner Komponente erstellt, die Standardwerte für die zusätzlichen Eingabeeigenschaften definiert. Dies behebt mein unmittelbares Problem, beantwortet diese Frage jedoch nicht.

Answer 1

Warum nicht einfach:

<InputGroup> 
    <FormControl 
     {...props} 
    /> 
    </InputGroup> 

?

Was ich denke, muss geändert werden, um size oder maxLength Requisiten zu passieren ... Sie müssen sie tatsächlich übergeben. Und ich sehe das nicht in getInputProps passiert. Also, wenn Sie getInputProps verwenden müssen, versuchen Sie, es wie folgt zu ändern: