自定義輸入 - 終極版形式

我有以下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`.

如何正確設置內容？

來源

2017-01-23 FacundoGFlores

我認爲這個問題是您試圖傳遞一個字符串作爲對象

<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" 
    />

來源

2017-01-23 14:57:15 Kejt

謝謝，但問題出在內容上。我可以通過道具的其餘部分發送對象，但是我只需要傳遞'field.input.value'。我試圖用'redux-form'這個自定義組件來引導，並且我不清楚如何傳遞'content'和'controlFunc'，即現在我改變了發送給內容的道具並且解決了警告，但我不能改變輸入的值:(也許參數需要以其他方式傳遞 – FacundoGFlores

我注意到的第一件事是字符串和我專注於它們，但是也是內容屬性似乎接受不是對象，但字符串或數字：））進一步編碼祝你好運！ – Kejt

您是通過道具傳遞對象，你必須通過字符串或數字。

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

來源

2017-01-23 14:58:33

是啊！它解決了警告和問題。但是，現在我無法改變輸入內的值，你知道爲什麼嗎？ – FacundoGFlores

我是第一個:(：DD – Kejt

@FacundoGFlores「控制輸入」是你的話:) [鏈接]（https://facebook.github.io/react/docs/forms.html）。當你通過props對象傳遞值來輸入時，你必須給onChange方法來輸入以改變那個傳遞對象。解決方案1：將「value」重命名爲「defaultValue」，解決方案2：閱讀關於受控輸入:) –

自定義輸入 - 終極版形式

回答

相關問題