カスタム入力 - Reduxのフォーム

Question

私は、次のCustomInputコンポーネントがあります。

import React from 'react'; 

const CustomInput = props => (
    <div className="form-group"> 
    <label className="form-label">{props.title}</label> 
    <input 
     className="form-input" 
     name={props.name} 
     type={props.inputType} 
     value={props.content} 
     onChange={props.controlFunc} 
     placeholder={props.placeholder} 
    /> 
    </div> 
); 

CustomInput.propTypes = { 
    inputType: React.PropTypes.oneOf(['text', 'number']).isRequired, 
    title: React.PropTypes.string.isRequired, 
    name: React.PropTypes.string.isRequired, 
    controlFunc: React.PropTypes.func.isRequired, 
    content: React.PropTypes.oneOfType([ 
    React.PropTypes.string, 
    React.PropTypes.number, 
    ]).isRequired, 
    placeholder: React.PropTypes.string, 
}; 

export default CustomInput; 

をそして、これは私のフォームです：私は私のコンポーネントをレンダリングすることができ

import React, { PropTypes } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import CustomInput from '../components/CustomInput'; 

const renderMyStrangeInput = field => (
    <CustomInput 
    inputType={'number'} 
    title={'How many items do you currently own?'} 
    name={'currentItems'} 
    controlFunc={param => field.input.onChange(param.val)} 
    content={{ val: field.input.value }} 
    placeholder={'Number of items'} 
    /> 
); 

class ItemsForm extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <form className="container" onSubmit={handleSubmit}> 
     <h1>Nuevo Pedido</h1> 
     <Field name="myField" component={renderMyStrangeInput} /> 
     <div className="form-group"> 
      <button type="submit" className="btn btn-primary input-group-btn">Submit</button> 
     </div> 
     </form> 
    ); 
    } 
} 

ItemsForm.propTypes = { 
}; 

ItemsForm = reduxForm({ 
    form: 'Items', 
})(ItemsForm); 

export default ItemsForm; 

が、コンテンツ・タイプを持ついくつかの問題があります。私はCustomInputを設定した場合、まず、数字を受け入れるために私が手：

he specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)? 

第二に、私はテキストにinputTypeを設定した場合、それはレンダリング：

[object Object] 

をので、コンソールは次の警告を与えています：

Warning: Failed prop type: Invalid prop `content` supplied to `CustomInput`. 

コンテンツを正しく設定するにはどうすればよいですか。

Answer 1

は、私は問題はあなたが小道具を経由して、オブジェクトを渡しているとあなたは文字列または数値を渡さなければなりません

<CustomInput 
    inputType="number" 
    title="How many items do you currently own?" 
    name="currentItems" 
    controlFunc={param => field.input.onChange(param.val)} 
    content={field.input.value} 
    placeholder="Number of items" 
    /> 

Answer 2

をオブジェクトとして使用すると、パス文字列をしようとしているということだと思います。

content={{ val: field.input.value }} // no! 
content={field.input.value} // yes! :)