javascript - ant design的Form组件怎么设置ref值？

Question

<Form horizontal onSubmit={this.handleSubmit}>
             <FormItem
               {...formItemLayout}
               label="用户名："
             >
               <Input type="text" {...getFieldProps('email', { ref: 'email' })} placeholder="请输入邮箱" />
             </FormItem>
             <FormItem
               {...formItemLayout}
               label="密码："
             >
               <Input type="password" {...getFieldProps('pass', { ref: 'pass' })} placeholder="请输入密码" />
             </FormItem>
            <Button type="primary" htmlType="submit" >登录</Button>
      </Form>

试了很多写法，好像都没有用啊！！！！！

Answer 1

Ant 中不需要为 Form 组件设置 ref 。如上面的代码，只需要把 FormItem 包裹在 Form 中就行了，输入框里面用 getFieldProps 设置值。

重点在于需要在组件的外面再套一层 Form.create用于提供props.form，假设你的组件名叫 FormComponent，像下面这样：

/**
 * 包装 Form 表单, 用于提供读写数据的功能
 */
FormComponent = Form.create({
    mapPropsToFields (props) {
        // 把表单中的字段映射到 props 中
        return {
            email: props. email,
            pass: props. pass
        }
    }
})(FormComponent);


export default FormComponent;

就行啦，自己试下吧