antd表单input输入失效

Question

目前有这样的需求：一个表单里的输入项想做成组件的形式，可以重复利用。

父组件：

let props={
getFieldDecorator:getFieldDecorator,
itemName:'passWords',
FormItem:FormItem
}
<form>
<FormItem label="用户名" {...labelLayout} hasFeedback>

{getFieldDecorator('userName', {
  rules: [
    {
      required: true,
      pattern: /^[0-9a-zA-Z]{1,62}$/,
      message: '用户名由英文小写字母，数字组成'
    }
  ]
})(<Input size="large" placeholder="用户名"/>)}

</FormItem>
<ItemComponent {...props}/>
</form>

ItemComponent子组件：

class ItemComponent extends Component {
constructor(props) {

super(props);

}
componentDidMount() {

console.log(this.props)

}
render() {

let getFieldDecorator=this.props.getFieldDecorator
let dispatch=this.props.dispatch
let name=this.props.itemName
let FormItem=this.props.FormItem
return (
  <FormItem label="测试" {...labelLayout} hasFeedback>
    {getFieldDecorator(name, {
      rules: [
        {
          required: true,
          message: '密码不能为空'
        }
      ]
    })(
      <Input size="large" placeholder="passWords"/>
    )}
  </FormItem>
)

}
}

这样子组件的输入框是不能输入东西的。不知为何，FormItem、函数还有name是通过props传过来的，不可以这样用的么？

Answer 1

1. FormItem 最好不要经 props 传递
2. 需要把 Form.create() 创建的 form 的 getFieldDecorator 传递过去，楼主感觉并没有这样传递（建议直接把 form 传递给组件）
3. 验证规则有点问题，required 可以单独创建一条验证规则

改写过的组件如下：

import React, { Component } from 'react';
import { Form, Input } from 'antd';

export default class FormItemComponent extends Component {
    render() {
        const { form, field, label = '测试', formItemProps } = this.props;
        const { getFieldDecorator } = form;
        
        return (
            <Form.Item label={label} {...formItemProps}>
                {getFieldDecorator(field, {
                    rules: [
                        { required: true, message: '该字段是必填滴！' }
                    ]
                })(
                    <Input size="large" placeholder="输入点什么吧" />
                )}
            </Form.Item>
        );
    }
}

Answer 2

FormItem是哪里来的？

Answer 3

楼主解决了么?我也今天也遇到了 发现删掉{getFieldDecorator(name, {})这一段 表框可以正常输入 目前不知道怎么解决

Answer 4

我的问题是因为我把form表单当成整个jsx赋值给一个变量,然后在render里面渲染这个变量.
解决方法就是,直接在render里面渲染表单组件,不在赋值给变量.(应该是要直接渲染估计)

Answer 5

为什么我没有耐心看完问题