时间戳

首页 > 解决方案 > 如果未更改默认值，则 antd 表单项验证失败

reactjs - 如果未更改默认值，则 antd 表单项验证失败

问题描述

我的 React 组件中有以下antd表单。默认值来自props，我即将在提交时更改redux store。但是，如果用户不更改输入值并按下“保存”，则验证失败并且在控制台日志中我得到了 util.js:19 async-validator: ["'title' is required"]

<Form name="title" onFinish={this.submitEdit} >
    <Form.Item name="title" rules={[{ required: true, message: 'Required field' }]}>
        <Input defaultValue={this.props.title} placeholder="Enter entry title"/>
    </Form.Item>
    <div>
        <Button type="primary" htmlType="submit">Save</Button>
        <Button onClick={this.cancelEdit}>Cancel</Button>
    </div>
</Form>

我对 antd 日历控件有类似的问题。尝试编写自定义验证器，但看起来如果没有更改，输入值未定义。我有机会让它发挥作用吗？

标签： reactjsantd

解决方案

是的，根据此处的文档，您需要使用该initialValue道具<Form.Item>然后才能正常工作。

<Form name="title" onFinish={this.submitEdit} >
    <Form.Item
      name="title"
      rules={[{ required: true, message: 'Required field' }]} 
      initialValue={this.props.title}
      >
        <Input placeholder="Enter entry title"/>
    </Form.Item>
    <div>
        <Button type="primary" htmlType="submit">Save</Button>
        <Button onClick={this.cancelEdit}>Cancel</Button>
    </div>
</Form>

干杯。

推荐阅读