我有以下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`.
如何正確設置內容?
謝謝,但問題出在內容上。我可以通過道具的其餘部分發送對象,但是我只需要傳遞'field.input.value'。我試圖用'redux-form'這個自定義組件來引導,並且我不清楚如何傳遞'content'和'controlFunc',即現在我改變了發送給內容的道具並且解決了警告,但我不能改變輸入的值:(也許參數需要以其他方式傳遞 – FacundoGFlores
我注意到的第一件事是字符串和我專注於它們,但是也是內容屬性似乎接受不是對象,但字符串或數字: ))進一步編碼祝你好運! – Kejt