如何獲得redux-form來通過輸入屬性

我正在使用爲redux-form字段提供驗證的反應組件庫。我的問題是他們不通過HTML輸入屬性到他們呈現的輸入元素。需要改變什麼以允許他們將諸如size或maxLength之類的屬性傳遞給輸入元素？如何獲得redux-form來通過輸入屬性

下面是如何我使用這些組件中的一個：

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

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

適應後托馬斯建議的更改到getInputProps也去掉非輸入從道具屬性：

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

由FormControl產生的輸入元素仍然不具有的大小和最大長度屬性。這似乎是朝着正確方向邁出的一步。

記錄傳遞給TextInput的道具，明確了尺寸和maxLength屬性沒有達到它。那麼，我們如何獲得redux-form來通過額外的輸入屬性呢？

添加09-OCT-2017 ++++++++++

我嘗試添加額外的輸入屬性字段標識道具屬性。他們仍然沒有被傳入我的組件。

作爲最後的手段，我創建了一個定義額外輸入屬性默認值的組件副本。這解決了我眼前的問題，但沒有回答這個問題。

來源

2017-10-07 softweave

爲什麼不乾脆：

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

？

我認爲需要改變才能通過size或maxLength道具是...你需要真正的傳遞它們。我不認爲這發生在getInputProps。所以如果您需要使用getInputProps嘗試修改它如下：

export function getInputProps(props) { 
    const { 
    id: props.id, 
    name: props.name, 
    onBlur: props.onBlur, 
    onChange: props.onChange, 
    // ... 
    ...rest // props that you didn't expect, like `size`, `maxLength` 
} = props; 


    return { 
    id, 
    name, 
    onBlur, 
    onChange, 
    // ... 
    ...rest, // passing the other props down 
    }; 
}}

來源

2017-10-07 09:10:06 Tomasz

如何獲得redux-form來通過輸入屬性

回答

相關問題