<Field
type="text"
className="myClass"
component={InputField}
placeholder="Type here..."
/>
和你的定制InputField
应该是这样的
(我把这个例子取自http://redux-form.com/6.5.0/examples/submitValidation/ http://redux-form.com/6.5.0/examples/submitValidation/)
export const InputField = ({ input, type, placeholder, className, meta: { touched, error } }) => (
<div>
<input {...input} placeholder={placeholder} type={type} className={className}/>
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)
或者更好的方法,如果道具太多,你可以使用对象解构 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
export const InputField = (field) => (
<div>
<input {...field.input} {...field} />
{field.meta.touched && field.meta.error && <span className="error">{field.meta.error}</span>}
</div>
)
{...field}
将提取您传入的所有道具Field
.
你可以看一下官方的 redux-form 示例:http://redux-form.com/6.5.0/examples/react-widgets/ http://redux-form.com/6.5.0/examples/react-widgets/以获得更多想法。
希望能帮助到你 :)